比较靠谱的手风琴代码
<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. PureComponent & shouldComponentUpdate

    Called to determine whether the change in props and state should trigger a re-render. Component alwa ...

  2. swift的柯里化demo

    func baseFunc(go:String, goo:String) -> String { return "hello" + go + goo; } func Curr ...

  3. nginx rewrite实战实例

    本部分内容为nginx生产环境中使用的场景示例. 域名跳转(域名重定向) 示例1(不带条件的): server{ listen ; server_name www.aminglinux.com; re ...

  4. python .socket 连接

    https://blog.csdn.net/mgsky1/article/details/93412128https://blog.csdn.net/weixin_44449518/article/d ...

  5. centos8.0安装docker

    背景简介: 前两天红帽正式发布了RHEL8,网上同时也有了CentOS8,一直在接触容器方面,为了尝鲜,下载了CentOS8,并尝试安装docker,不料竟然还报了个错(缺少依赖),故及时记录一下,方 ...

  6. Eclipse4.9集成Tomcat 9.0.21详细版

    1.下载Tomcat 从Tomcat官网下载:https://tomcat.apache.org 此处我下载的版本是Tomcat 7.0.94 下载完毕后解压即可,我解压后的路径是D:\soft\ap ...

  7. 迁移学习、fine-tune和局部参数恢复

    参考:迁移学习——Fine-tune 一.迁移学习 就是把已训练好的模型参数迁移到新的模型来帮助新模型训练. 模型的训练与预测: 深度学习的模型可以划分为 训练 和 预测 两个阶段. 训练 分为两种策 ...

  8. 【Gamma】Scrum Meeting8

    目录 写在前面 进度情况 任务进度表 燃尽图 照片 写在前面 例会时间:6.6 22:30-22:45 例会地点:微信群语音通话 代码进度记录github在这里 进度情况 任务进度表 注:点击链接跳转 ...

  9. Java 内存排查，慢慢收集总结

    Java堆外内存排查小结: https://mp.weixin.qq.com/s?__biz=MzA4MTc4NTUxNQ==&mid=2650518612&idx=2&sn= ...

  10. java join()基本用法与说明解释

    join()方法的作用,是等待这个线程结束: 也就是说,t.join()方法阻塞调用此方法的线程(calling thread)进入 TIMED_WAITING 状态,直到线程t完成,此线程再继续: ...