比较靠谱的手风琴代码
<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>自制手风琴</title>
<script type="text/javascript" src="/index/js/jquery.min.js"></script>
<style type="text/css">

.menulist li {
display: none;
}

</style>
</head>
<body>
<div class="menulist">
<ul>
<span>AAAAA<b>+</b></span>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
<ul>
<span>BBBBB<b>+</b></span>
<li>22222</li>
<li>22222</li>
<li>22222</li>
</ul>
<ul>
<span>CCCCC<b>+</b></span>
<li>33333</li>
<li>33333</li>
<li>33333</li>
<li>33333</li>
<li>33333</li>
</ul>
<ul>
<span>DDDDD<b>+</b></span>
<li>44444</li>
<li>44444</li>
</ul>
<ul>
<span>EEEEE<b>+</b></span>
<li>55555</li>
<li>55555</li>
<li>55555</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
$('span').click(function () {
if ($(this).siblings('li').hasClass('on')) {
$(this).siblings('li').slideUp(500).removeClass('on');
$(this).children('b').text('+');
} else {
$(this).siblings('li').slideDown(500).addClass('on');
$(this).children('b').text('-');
}
});
});
</script>
</body>
</html>

</pre>

jquery实现比较靠谱的手风琴代码的更多相关文章

  1. jQuery鼠标滚动垂直全屏切换代码

    体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...

  2. Web jquery表格组件 JQGrid 的使用 - 全部代码

    系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...

  3. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  4. jQuery下拉友情链接美化效果代码分享

    这篇文章主要介绍了jQuery下拉友情链接美化效果,很实用的代码,推荐给大家,有需要的小伙伴可以参考下. 文实例讲述了jQuery下拉友情链接美化效果,jQuery下拉友情链接美化代码是一款基于jQu ...

  5. jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...

  6. jQuery判断元素是否是隐藏的代码

    if($("#elem_id").is(":hidden")) { } 实例代码1: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC & ...

  7. jQuery防京东浮动网站楼层导航代码

    jQuery防京东浮动网站楼层导航代码   <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml" ...

  8. 基于jQuery可悬停控制图片轮播代码

    基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览   源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...

  9. jQuery左侧图片右侧文字滑动切换代码

    分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div cla ...

随机推荐

  1. jlink之j-scope使用

    网上看到了j-scope的用法,可以把单片机的数据显示成波形,这个和我使用的STMStudio有点类似,但是有区别: 1.STMStudio这个需要stlink结合swo的输出口,j-scope不需要 ...

  2. static在Swift 中表示 “类型范围作用域”

    In Swift, however, type properties are written as part of the type’s definition, within the type’s o ...

  3. LeetCode 752. Open the Lock

    原题链接在这里:https://leetcode.com/problems/open-the-lock/ 题目: You have a lock in front of you with 4 circ ...

  4. 洛谷 P3243 [HNOI2015]菜肴制作 题解

    每日一题 day60 打卡 Analysis 这道题一看就感觉是个拓扑排序,但因为按字典序最小的排序会有问题(见第三个样例)主要原因是每次选择有后效性,而从后往前就不会存在这个问题,因为每个子任务都是 ...

  5. BZOJ 4816[SDOI2017]数字表格（莫比乌斯反演）

    题目链接 \(Description\) 用\(f_i\)表示\(fibonacci\)数列第\(i\)项,求\(\prod_{i=1}^{n}\prod_{j=1}^{m}f[gcd(i,j)]\) ...

  6. pandas把'<m8[ns]'类型转换为int类型进行运算

    工作中经常碰到两列数据为date类型,当这两列数据相减或者相加时,得到天数,当运用这个值进行运算会报错:ufunc true_divide cannot use operands with types ...

  7. TensorFlow 报错 ValueError: Can't load save_path when it is None.

    原因 : 模型还未生成出来 , 此时你去检测的生成完毕的模型 , 模型呢 ? 还没生成 . 模型还没生成就引用了为什么不报错 ? 解决办法 : 当前情况不要以为是你的程序有 bug , 而是你的模型还 ...

  8. Golang 位向量

    位图 位图(Bitmap)是通过一个 bit 来表示某个元素对应的值或者状态.它并不是什么新的数据结构.它的内容其实就是普通的字符串. 在redis中,我们可以通过 get/set 获取位图的内容,也 ...

  9. UDF——查找单元的相邻单元

    Fluent版本:Fluent 19.2 Visual Studio版本:Visual Studio 2013 测试文件及源码下载链接: https://pan.baidu.com/s/1AZ59hs ...

  10. 【技术博客】Django+uginx+uwsgi框架的服务器部署

    1.登录服务器 使用ssh来直接登录到服务器terminal进行操作,推荐使用XShell和XFtp来进行远程登录和文件传输. 2.运行环境准备 本组获得的华为云服务器为ubuntu16.04版本,先 ...