比较靠谱的手风琴代码
<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. layoutSubviews的缺省实现是使用约束进行布局

    Discussion The default implementation of this method does nothing on iOS 5.1 and earlier. Otherwise, ...

  2. 牛客网CSP-S提高组赛前集训营Round4

    牛客网CSP-S提高组赛前集训营 标签(空格分隔): 题解 算法 模拟赛 题目 描述 做法 \(BSOJ6377\) 求由\(n\)长度的数组复制\(k\)次的数组里每个连续子序列出现数字种类的和 对 ...

  3. nodegui 使用react开发跨平台应用试用

    nodegui官方团队提供了基于react 应用开发方式,同时我们集成官方的packer 进行快速的应用打包 项目说明 项目使用了官方的计算机应用,我使用官方的react starter,同时添加了p ...

  4. timeout/timelimit

    timelimit

  5. PHP引用（&）

    引用是什么 在 PHP 中引用意味着用不同的名字访问同一个变量内容.这并不像 C 的指针:例如你不能对他们做指针运算,他们并不是实际的内存地址.替代的是,引用是符号表别名.注意在PHP 中,变量名和变 ...

  6. 小胖的奇偶（Viojs1112）题解

    原题: 题目描述 huyichen和xuzhenyi在玩一个游戏:他写一个由0和1组成的序列. huyichen选其中的一段(比如第3位到第5位),问他这段里面有奇数个1 还是偶数个1.xuzheny ...

  7. 第02组 Alpha冲刺（4/4）

    队名:十一个憨批 组长博客 作业博客 组长黄智 过去两天完成的任务:了解整个游戏的流程 GitHub签入记录 接下来的计划:继续完成游戏 还剩下哪些任务:完成游戏 燃尽图 遇到的困难:没有美术比较好的 ...

  8. vlc for mac设置中文的方法

    VLC for mac是一款mac系统下的多媒体播放器,支持播放MPEG-1.MPEG-2.MPEG-4.DivX.MP3和OGG,以及DVD.VCD.等各种流媒体协议在内的多种协议格式,并且能够对电 ...

  9. 运行java程序的时候出现Exception in thread "main" java.lang.UnsupportedClassVersionError:

    1 Exception in thread "main" java.lang.UnsupportedClassVersionError: com/test/inherited/In ...

  10. JVM 最多支持多少个线程？

    阅读本文大概需要 2.8 分钟. 原文:www.jb51.net/article/49087.htm McGovernTheory 在 StackOverflow 提了这样一个问题: Java 虚拟机 ...