<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

    <title>测试</title>

    <style type="text/css">

        *{ margin:0; padding:0;}

        .menu{ width:100%;}

        .menu .item{ width:100%; height:auto; background-color: #fefefe;}

        .menu .item h1{ font-size:15px; width:100%; position:relative;}

        .menu .item h1 i{ display: inline-block; height:15px; width:10px; position:absolute; right:10px; top:0; background: url(images/right.png) no-repeat; background-size:10px auto;}

        .menu .item ul{ display: none;}

        .menu .item ul li{ list-style:none; color:#000; background-color: #fefefe; border-bottom:solid 1px #ededed; line-height: 32px; width:100%; position:relative;}

        .menu .item ul li p{ display: none;}

        .menu .item.active h1 i{ display: inline-block; height:10px; width:15px; position:absolute; right:10px; top:3px; background: url(images/down.png) no-repeat; background-size:15px auto;}

        .menu .item ul li span.icon{display: inline-block; height:15px; width:10px; position:absolute; right:10px; top:0; background: url(images/right.png) no-repeat; background-size:10px auto;}

        .menu .item ul li.active span.icon{ display: inline-block; height:10px; width:15px; position:absolute; right:10px; top:3px; background: url(images/down.png) no-repeat; background-size:15px auto;}

        .menu .item.active ul{ display: block;}

        .menu .item.active ul li.active p{ display: block;}

    </style>

</head>

<body>

    <div class="menu">

        <div class="item">

            <h1>标题一<i></i></h1>

            <ul>

                <li>1<span class="icon"></span>

                    <p>锋科技了束带结发历史的会计法落实到飞</p>

                </li>

                <li>2<span class="icon"></span>

                    <p>锋科技了束带结发历史的会计法落实到飞</p>

                </li>

                <li>3<span class="icon"></span>

                    <p>锋科技了束带结发历史的会计法落实到飞</p>

                </li>

            </ul>

        </div>

        <div class="item">

            <h1>标题二<i></i></h1>

            <ul>

                <li>1<span class="icon"></span>

                    <p>锋科技了束带结发历史的会计法落实到飞</p>

                </li>

                <li>2<span class="icon"></span>

                    <p>锋科技了束带结发历史的会计法落实到飞</p>

                </li>

                <li>3<span class="icon"></span>

                    <p>锋科技了束带结发历史的会计法落实到飞</p>

                </li>

            </ul>

        </div>

        <div class="item">

            <h1>标题三<i></i></h1>

            <ul>

                <li>1<span class="icon"></span>

                    <p>锋科技了束带结发历史的会计法落实到飞</p>

                </li>

                <li>2<span class="icon"></span>

                    <p>锋科技了束带结发历史的会计法落实到飞</p>

                </li>

                <li>3<span class="icon"></span>

                    <p>锋科技了束带结发历史的会计法落实到飞</p>

                </li>

            </ul>

        </div>

    </div>

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

    <script type="text/javascript">

        jQuery(function(){

            $('.menu .item').each(function(){

                var flag=true;

                $(this).find('h1').on('click',function(){

                    if(flag){

                        $('.menu .item').removeClass('active');

                        $(this).parent('.item').addClass('active');

                        flag=false;

                    }else{

                        $(this).parent('.item').removeClass('active');

                        flag=true;

                    }

                });

            });

            $('.menu .item ul li').each(function(){

                var flag=true;

                $(this).on('click',function(event){

                    event.preventDefault();

                    event.stopPropagation();

                    if(flag){

                        $('.menu ul li').removeClass('active');

                        $(this).addClass('active');

                        flag=false;

                    }else{

                        $(this).removeClass('active');

                        flag=true;

                    }

                });

            });

        });

    </script>

</body>

</html>

点击div折叠的更多相关文章

  1. 点击div 跳转并通过URL传参

    点击div前要先给div绑定要传的参数: //给panel绑定自定义属性,方便在跳转时传带参数,键/值对排列 panel.attr("user_age",user_age); pa ...

  2. javascript实现列表的点击展开折叠

    <script> window.onload = function() { //要折叠的区域 var catalog = document.getElementById("div ...

  3. 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV

    点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...

  4. div加链接 html给div加超链接实现点击div跳转的方法[申明：来源于网络]

    div加链接 html给div加超链接实现点击div跳转的方法[申明:来源于网络] 地址:http://www.cdxwcx.com/faq/htmldivLink.html

  5. 21.JQ的监听事件（点击div外面可以让它消失）

    JQ的监听事件(点击div外面可以让它消失) //监听整个页面 $(document).bind("click", function() { //给需要的对象赋予事件 $(&quo ...

  6. 点击Div，显示其innerHTML

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

  7. checkbox复选框和div click事件重叠，点击div后复选框也被选中，同时改变div颜色，否则则不选中

     checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...

  8. 点击div全选中再点击取消全选div里面的文字

    想做一个就是点击一个div然后实现的功能是div里面的文字都成选中状态,然后就可以利用浏览器的自带的复制功能,任意复制在哪里去了 在网上百度了一下 然后网上的答案感觉很大的范围 然后一些搜索 然后就锁 ...

  9. 隐藏<input type="file"> 实现点击div或图片打开文件选择路径

    HTML: <input type="file" style="display:none" id="addfile-btn"> ...

随机推荐

  1. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  2. 知方可补不足~Sqlserver中的几把锁和.net中的事务级别

    回到目录 当数据表被事务锁定后,我们再进行select查询时,需要为with(锁选项)来查询信息,如果不加,select将会被阻塞,直到锁被释放,下面介绍几种SQL的锁选项 SQL的几把锁 NOLOC ...

  3. lua实现深度拷贝table表

    lua当变量作为函数的参数进行传递时,类似的也是boolean,string,number类型的变量进行值传递.而table,function,userdata类型的变量进行引用传递.故而当table ...

  4. Atitit Immutability 和final的优点

    Atitit Immutability 和final的优点 什么是 immutability? 其实细分起来有语法上的 immutable (例如 Java 里的 final 关键字), 和运行时对象 ...

  5. FIR.im Weekly － 劳动节我们也没有停下来

    五一到五四的节假日对勤劳的开发者们似乎是零存在,各种干货好资源也并未因假期的到来而减少,所以这周的 Weekly 依然多产. Swift 样式指南:2015年4月更新 这是 @开发技术前线 收录的由 ...

  6. iOS---类方法（静态方法）和实例方法

    类方法   实例方法是以+开头的方法, 实例方法是用实例对象访问:   类方法的对象是类而不是实例,通常用来创建对象或者工具类.     在实例方法里,根据继承原理发送消息给self和super其实都 ...

  7. PHP_01之PHP概述、数据、语法

    1.定义:PHP Hypertext Preprocessor,超文本预处理器,服务器端脚本语言:2.环境:WAMP:Window+Apache+PHP+MySQL: LAMP:Linux+Apach ...

  8. Change Git Default Editor in Windows

    On 32 bit Win OS: git config --global core.editor "'C:/Program Files/Notepad++/notepad++.exe' - ...

  9. 移动端调试工具DebugGap推荐。

    因为现在项目大部分都是在写移动端,但是调试起来实在是不方便,虽然可以用chrome来模拟手机端,但实际上差别还是有点大的,最近找到了一款比较不错的调试工具,这里分享一下了,虽然网上已经有分享过了,但还 ...

  10. 【WP开发】在手机屏幕点亮时播放声音

    今天说的内容有点流氓,请诸君在开发应用时谨慎使用. 那么,这活儿到底有多流氓呢? 先介绍一下要实现的功能:当用户按电源键(也可以是双击屏幕)点亮手机的屏幕时播放一下短音乐,而且应用程序可以不在前台运行 ...