<!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. Visual Studio 2015速递(3)——ASP.NET 新特性

    系列文章 Visual Studio 2015速递(1)——C#6.0新特性怎么用 Visual Studio 2015速递(2)——提升效率和质量(VS2015核心竞争力) Visual Studi ...

  2. Senparc.Weixin.MP SDK 微信公众平台开发教程（十三）：地图相关接口说明

    为了方便大家开发LBS应用,SDK对常用计算公式,以及百度和谷歌的地图接口做了封装. 常用计算: 用于计算2个坐标点之间的直线距离:Senparc.Weixin.MP.Helpers.Distance ...

  3. Java构造函数

    构造函数的定义: 构造函数 ,是一种特殊的方法.主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中.特别的一个类可以有多个构造函数 ,可根据其参数个 ...

  4. Android开发学习之路-Service和Activity的通信

    在很多时候,Service都不仅仅需要在后台运行,还需要和Activity进行通信,或者接受Activity的指挥,如何来实现,来看代码. 定义一个服务 // 创建一个服务,然后在onBind()中返 ...

  5. java 线程的终止与线程中断

    关于线程终止: 1.一般来讲线程在执行完毕后就会进入死亡状态,那该线程自然就终止了. 2.一些服务端的程序,可能在业务上需要,常驻系统.它本身是一个无穷的循环,用于提供服务.那对于这种线程我们该如何结 ...

  6. WPF入门教程系列八——布局之Grid与UniformGrid（三）

    五. Grid Grid顾名思义就是“网格”,它的子控件被放在一个一个实现定义好的小格子里面,整齐配列. Grid和其他各个Panel比较起来,功能最多也最为复杂.要使用Grid,首先要向RowDef ...

  7. SDWebImage清除图片缓存

    背景: 使用 SDWebImage 库,由于内存中一直缓存着加载的图片,而导致内存过高(我们无法手动管理内存),弹出内存警告而导致程序很卡或者直接crash掉. 我的解决方法: 在AppDelegat ...

  8. 快速入门系列--WCF--01基础概念

    转眼微软的WCF已走过十个年头,它是微软通信框架的集大成者,将之前微软所有的通信框架进行了整合,提供了统一的应用方式.记得从自己最开始做MFC时,就使用过Named Pipe命名管道,之后做Winfo ...

  9. png图片制作任意颜色的小图标

    本内容只要是对张鑫旭PNG格式小图标的CSS任意颜色赋色技术的这篇文章进行详细说明. HTML: <i class="icon"><i class="i ...

  10. WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 日历控 ...