<!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. Qt create 配置git版本管理

    配置步骤: git的下载安装.(此时,您应该明白git和github的区别) 如下图1-5,Tool –> Options –> Version Control –> Git –&g ...

  2. C++ 引用

    本文主要记录了C++中的引用特性,总结了一下代码示例和错误. 简单的引用 引用是C++的特性,指针是C语言的特性.上面代码结果如下: 20 20 100 20 true 引用和被引用的对象是占用同一个 ...

  3. AutoMapper的简单使用

    接触AutoMapper已经有两年多的时间了,在ORM框架中,它使持久层对象与DTO对象之间的转换变得相当简单. 随着负责的项目的增多,使用的技术框架一多起来,很多具体的技术点难免记不清, 加上同时兼 ...

  4. CocoaPods 深入使用

    在 CocoaPods 使用中介绍了基本的使用 写项目的时候想用到 SQLite.swift第三方库,但是问题来了 pod search SQLite.swift  //执行这条语句,搜索不到结果 但 ...

  5. Oracle数据库面试题【转载】

    1. Oracle跟SQL Server 2005的区别? 宏观上: 1). 最大的区别在于平台,oracle可以运行在不同的平台上,sql server只能运行在windows平台上,由于windo ...

  6. MVVM架构~knockoutjs系列之正则表达式使规则更灵活

    返回目录 几乎每种验证架构都会有正则表达式的加盟,一般地,一种验证架构首先会提供一些标准的,常用的验证规则,它们通常是数字验证,电话验证,email验证,长度验证,范围验证,日期验证等,而如果使你的验 ...

  7. Atitit 面向对象弊端与问题 坏处 缺点

    Atitit 面向对象弊端与问题 坏处 缺点   1.1. 状态fsm,反模块化,又是反并行的,这是它的非常固有的特征, 1 1.2. 现时的OOP编程有可能不缓存友好(cache friendly) ...

  8. KnockoutJS 3.X API 第五章 高级应用(4) 自定义处理逻辑

    在典型的Knockout应用程序中,DOM元素是动态添加和删除的,例如使用模板绑定或通过控制流绑定(if,ifnot,with和foreach). 当创建自定义绑定时,通常需要添加清除逻辑,当Knoc ...

  9. 微软BI 之SSIS 系列 - 使用 SQL Profilling Task (数据探测) 检测数据源数据

    开篇介绍 SQL Profilling Task 可能我们很多人都没有在 SSIS 中真正使用过,所以对于这个控件的用法可能也不太了解.那我们换一个讲法,假设我们有这样的一个需求 - 需要对数据库表中 ...

  10. TTAS Lock C++11 实现

    template<class Lock> class Lock_guard{ private: Lock lock; public: explicit Lock_guard(Lock&am ...