比较靠谱的手风琴代码
<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. runloop事件、UI更新、observer与coranimation

    一.触摸事件派发与视图绘制打包 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__ __dispatchPreprocessedEve ...

  2. 笨方法学Python3（21-44）

    相关代码详见github地址:https://github.com/BMDACMER/Learn-Python 接着前天的总结 习题21:函数可以返回某些东西 定义函数的加减乘除,以及嵌套使用 习题2 ...

  3. Numpy | 09 高级索引

    NumPy 比一般的 Python 序列提供更多的索引方式.除了之前看到的用整数和切片的索引外,数组可以由整数数组索引.布尔索引及花式索引. 整数数组索引 实例1:获取数组中(0,0),(1,1)和( ...

  4. Git常用命令与入门

    Git 仓库就是那个.git 目录,其中存放的是我们所提交的文档索引内容,Git 可基于文档索引内容对其所管理的文档进行内容追踪,从而实现文档的版本控制..git目录位于工作目录内.对于任何一个文件, ...

  5. Problem 2 旅行计划 (travelling .cpp)———2019.10.6

    lth tql,lzpclxf tql Orz Problem 2 旅行计划 (travelling.cpp)[题目描述]小 Z 打算趁着暑假,开启他的旅行计划.但与其他同学不同的是,小 Z 旅行时并 ...

  6. SpringBoot之KindEditor文件上传

    后端核心代码如下: package com.blog.springboot.controller; import java.io.BufferedOutputStream; import java.i ...

  7. PowerDesigner应用01 逆向工程之配置数据源并导出PDM文件

    物理数据模型(Physical Data Model)PDM,提供了系统初始设计所需要的基础元素,以及相关元素之间的关系:数据库的物理设计阶段必须在此基础上进行详细的后台设计,包括数据库的存储过程.操 ...

  8. leetcode：7. 整数反转

    题目描述: 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例: 输入: 123 输出: 321 输入: -123 输出: -321 输入: 120 输出: 21 注意:假 ...

  9. answer

    https://www.cnblogs.com/549294286/p/10451394.html 基于BIO实现的Server端,当建立了100个连接时,会有多少个线程?如果基于NIO,又会是多少个 ...

  10. Siam R-CNN: Visual Tracking by Re-Detection

    Siam R-CNN: Visual Tracking by Re-Detection 2019-12-02 22:21:48 Paper:https://128.84.21.199/abs/1911 ...