<!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. UIImage NSData 相互转化

    //UIImage 转为 NSData NSData *imageData = UIImagePNGRepresentation(aImage); //NSData 转为 UIImage UIImag ...

  2. DDD~领域事件中使用分布式事务

    回到目录 对于一个聚合来说,它可能会被附加很多事件,这里我们叫它领域事务,因为一个聚会我们可以把它理解成一个领域,一个业务.对于领域事件不清楚的同学可以看看我的这篇文章<DDD~领域事件与事件总 ...

  3. thinkphp里的session、cookie方法

    thinkphp里,对于session和cookie的操作,不管是存值.获取.删除,均只有一个方法.现分享出来,供大家参考参考. /** * session管理函数 * @param string|a ...

  4. Atitit 热更新资源管理器 自动更新管理器 功能设计

    Atitit 热更新资源管理器 自动更新管理器 功能设计 · 多线程并行下载支持 · 两层进度统计信息:文件级以及字节级 · Zip压缩文件支持 · 断点续传 · 详细的错误报告 · 文件下载失败重试 ...

  5. 学习ASP.NET MVC(四)——我的第一个ASP.NET MVC 实体对象

    今天我将根据数据库中的表结构添加一些类.这些类将成为这个ASP.NET MVC应用程序中“模型”的一部分.       我们使用Entity Framework(实体框架)来定义和使用这些模型类,并且 ...

  6. 手把手教你实现一个完整的 Promise

    用过 Promise,但是总是有点似懂非懂的感觉,也看过很多文章,还是搞不懂 Promise的 实现原理,后面自己边看文章,边调试代码,终于慢慢的有感觉了,下面就按自己的理解来实现一个 Promise ...

  7. TSQL 去除重复值

    数据去重主要分为两种情况:第一种是保证Select的全部列无重复:第二种是select的部分字段无重复,而其他字段取特定值. 1,对select的全部字段去重,直接使用distinct 函数 2,对s ...

  8. setTimeout,clearTimeout和setInterval

    http://www.cnblogs.com/backuper/archive/2009/12/02/1615129.html var timeout; timeout = setTimeout(hi ...

  9. CSS默认可继承样式

    前面的话 一直想总结出一份可继承样式的列表.常听说,颜色和字体是可继承的,盒模型样式是不可继承的,但其他样式呢?本文内容包括所有可继承的样式 [注意]关于样式的详细信息移步至此 常用可继承样式 col ...

  10. js选择目录

    找了好久,终于找到了! function browseFolder(path) {//打开本地目录(目录选择功能) try { var Message = "\u8bf7\u9009\u62 ...