比较靠谱的手风琴代码
<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. Linux中的查找与替换

    grep只能用于查找文件中的内容sed可以查找,然后替换或者插入想要的内容 a :新增,a的后面可以接字串,而这些字串会在新的一行出现(目前的下一行):d :删除,因为是删除啊,所以d后面通常不接任何 ...

  2. [iOS] 利用 NSAttributedString 进行富文本处理

    /iOS /[iOS] 利用 NSAttributedString 进行富文本处理 2016年4月4日 刘小龙 iOS 许多时候我们需要以各种灵活的形式展现文本信息,即富文本.普通的 text 属性显 ...

  3. 使用nodegui 开发高性能的跨平台桌面端应用

    nodegui 是基于qt + nodejs 的跨平台桌面开发方案,官方同时也提供了很不错的文档 简单使用 使用官方的starter clone 代码 git clone https://github ...

  4. Centrifugo  语言无关的实时消息服务

    Centrifugo 语言无关的实时消息服务,基于golang编写,提供了websocket 以及sockjs 的兼容处理,使用上很简单 同时也支持基于redis的扩展,以下是一个简单的运行测试 环境 ...

  5. [RN] React Native 键盘管理 在Android TextInput遮盖，上移等问题解决办法

    React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法 解决办法: 打开android工程,在AndroidManifest.xml中配置如下: <ac ...

  6. vue单项数据流

    当父组件给子组件传递数据的时候,子组件只能读取,不能改写.因为如果子组件改变父组件传递过来的数据时会造成数据流难以理解.

  7. bzoj1935: [Shoi2007]Tree 园丁的烦恼lowbit 离散化

    链接 bzoj 最好不要去luogu,数据太水 思路 一个询问转化成四个矩阵,求起点\((0,0)到(x,y)\)的矩阵 离线处理,离散化掉y,x不用离散. 一行一行的求,每次处理完一行之后下一行的贡 ...

  8. 第10组 Alpha冲刺（3/4）

    队名:凹凸曼 组长博客 作业博客 组员实践情况 童景霖 过去两天完成了哪些任务 文字/口头描述 继续学习Android studio和Java 制作登录注册界面前端 展示GitHub当日代码/文档签入 ...

  9. 初识RSA

    基础知识:http://www.guideep.com/read?guide=5676830073815040# python实现:https://blog.csdn.net/bian_h_f6127 ...

  10. Android ConstraintLayout 小记

    * 可以圆形定位view之间的位置,通过View的中心,来定位不同半径和弧度的距离. layout_constraintCircle : references another widget id la ...