转自：http://www.cnblogs.com/clc2008/archive/2011/10/25/2223254.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

    <style type="text/css">

    #myul{ width:504px;}

    #myul li { list-style:none;border:1px solid #96C2F1; padding:1px;}

    #myul li span{ list-style:none; background:#B2D3F5; width:480px; height:20px; display:block; padding-left:20px;  }

    #myul li span.hand{ cursor:pointer;background:#B2D3F5 url(img/right.gif) no-repeat 5px center;}

    #myul li span.current{ background:#b2d300 url(img/down.gif) no-repeat 5px center; }

    #myul li div{ background:#EFF7FF;width:490px; padding:0px 5px 5px 5px; }

    </style>

    <script type="text/javascript">

        $(function () {

            $("#myul li div").hide();

            $("#myul li span").addClass("hand");

            $("#myul li span").click(function () {

                $(this).toggleClass("current");

                $(this).parent().siblings().find("span").removeClass("current");

                $(this).parent().find("div.hid").slideToggle("fast");

                $(this).parent().siblings().find("div").slideUp("fast");

            });

        })

    </script>

</head>

<body>

<ul id="myul">

<li><span>第一级菜单</span>

   <div class="hid">

     <p>武器哦的撒旦法发生的撒旦法打撒旦法 <br />asdfasfdasfd</p>

     <p>武器哦的撒旦法发生的撒旦法打撒旦法 <br />asdfasfdasfd</p>

   </div>

</li>

<li><span>第二级菜单</span>

   <div class="hid">武器哦的撒旦法发生的撒旦法</div> </li>

<li><span> 第三级菜单</span>

<div class="hid">

   <p>武器哦的撒旦法发生的撒旦法打撒旦法asdfasfdasfd</p>

   <p>武器哦的撒旦法发生的撒旦法打撒旦法 <br />asdfasfdasfd</p>

   <p>武器哦的撒旦法发生的撒旦法打撒旦法asdfasfdasfd</p>

   <p>武器哦的撒旦法发生的撒旦法打撒旦法 <br />asdfasfdasfd</p>

   </div>

</li>

</ul>

</body>

</html>

【转】Jquery折叠效果的更多相关文章

  1. jQuery文本段落展开和折叠效果

    <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/h ...

  2. BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  3. jQuery 文本段落展开和折叠效果

    jQuery 文本段落展开和折叠效果 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" c ...

  4. [jquery]折叠指定条件的表格

    最近在做财务报表时候,一些表格要做特定折叠效果 这里通过2个自定义属性来对表格之间的属性作关联 date-head和date-num,输出表格时候,可以按照这2个自定义属性给某些带父子层级关系的内容指 ...

  5. jquery-练习-折叠效果

    <!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  6. 淡入淡出(折叠效果)and点击切换背景图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Vue 实现展开折叠效果

    Vue 实现展开折叠效果 效果参见:https://segmentfault.com/q/1010000011359250/a-1020000011360185 上述链接中,大佬给除了解决方法,再次进 ...

  8. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  9. css3折叠效果

    在开发过程中,经常会遇到一些交互效果,今天所联系的便是一个类似折纸的折叠效果,查看效果. 说到折纸,我们先看下图 这是我第一时间想到的大体思路,如果能让这6个面连续的变化角度到0不就可以了吗,运用cs ...

随机推荐

  1. iOS 字符串截取,将字符串中用括号包含的内容去除

    //去除字符串中用括号括住的位置 -(NSString *)handleStringWithString:(NSString *)str{ NSMutableString * muStr = [NSM ...

  2. 将本地jar包手动复制到Maven库中，在其它电脑上用Maven打包时出错

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/UP19910522/article/details/31396107 背景交代:在做图片水印时候引入 ...

  3. Nodejs课堂笔记—第一课：修改Webstorm的默认主题

    最近小半年一直在忙于研究Docker源码,也在写相关的分析文章.但受限于某些条件不能发布到网上,甚为郁闷.而最近几天,接到新的开发任务,需要使用nodejs.之前一直听说过nodejs,但从来没有真正 ...

  4. C#DataSet/DataAdapter

    DataReader必须持续连接,所以在调用方法SqlDataReader作为返回类型时候,必须在方法外关闭流,很不方便. DataAdapter用于对数据源检索数据并填充到DataSet中的表.Da ...

  5. mybatis中查询结果进行分组

    在用mybatis进行数据库查询时,对查询结果进行自动分组,在mapper.xml中的配置有些注意的地方,下面是实际项目中一个例子.在数据库中查询中如下: 在结果集中需要对alarmDate进行分组, ...

  6. 为什么下了android 4.1 的SDK后在本地用浏览器看api说明文档时，浏览器打开api的html文件很慢？试了好几款浏览器都一样。为什么？

    http://www.oschina.net/question/436724_61401 http://www.google.com/jsapi  他惹的祸 注释掉就可以了- <!-- < ...

  7. [转]Homebrew 卸载时出现：Failed to locate Homebrew! 错误

    今天在 MacBook 上安装 Homebrew,结果中间断了网,想重新卸载重装,结果一直卸载失败.问题现象如下: 问题现象 卸载时错误如下: ruby -e "$(curl -fsSL h ...

  8. Android SDK上手指南1：应用程序结构

    一直说要学java要学android开发,可是一直胡乱地忙活这忙活那,之前开始学了一点也中断了.说是没时间,都是借口,回顾一下自己的生活感觉缺少点激情,没有什么奋斗的动力,所以好多时间就浪费了.刚刚考 ...

  9. Python3 logging 模块

    Python3 logging模块 日志模块: 用于便捷记录日志且线程安全的模块 CRITICAL = 50 FATAL = CRITICAL ERROR = 40 WARNING = 30 WARN ...

  10. <再看TCP/IP第一卷>TCP/IP协议族中的最压轴戏----TCP协议及细节

    题外话:刚刚过去的半个月实在是忙得我喘不过来气,虽然手里还压着几个项目得在期末考试之前做完,但是想想还是更新一下随笔,稍微换个心情.另外小吐槽一下那些在博客园里原封不动抄书当随笔的人,唉真是....算 ...