<!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. Java基础之多线程

    1.进程和线程: 进程:正在进行的程序.每一个进程执行都有一个执行顺序,该顺序是一个执行路径,或者叫一个控制单元. 线程:进程内部的一条执行路径或者一个控制单元. 两者的区别: 一个进程至少有一个线程 ...

  2. jsp中运用application实现共享留言板功能

    jsp中application的知识点总结: 1.一个Web应用程序启动后,将会自动创建一个application对象,在整个应用程序的运行过程中只有这一个application对象,即所有访问该网站 ...

  3. Eloquent ORM笔记

    基本操作 新增 $user = new User; $user->name = 'John'; $user->save(); $insertedId = $user->id;//从对 ...

  4. Kafka入门初探+伪集群部署

    Kafka是目前非常流行的消息队列中间件,常用于做普通的消息队列.网站的活性数据分析(PV.流量.点击量等).日志的搜集(对接大数据存储引擎做离线分析). 全部内容来自网络,可信度有待考证!如有问题, ...

  5. Java程序员的日常 —— 多进程开发

    最近再弄进程管理相关的工作,因此必要的就涉及到各种系统下关于进程的管理. 这里简单的介绍下: 如何在Java中执行命令 在windows下肯定是dos命令了,而在linux则为shell命令.执行的方 ...

  6. iOS-数据持久化基础-沙盒机制

    沙盒详解 1.IOS沙盒机制 IOS应用程序只能在为该改程序创建的文件系统中读取文件,不可以去其它地方访问,此区域被成为沙盒,所以所有的非代码文件都要保存在此,例如图像,图标,声音,映像,属性列表,文 ...

  7. asp.net mvc 使用ajax请求 控制器 (PartialViewResult)分部的action，得到一个分部视图(PartialView)的HTML，进行渲染

    在asp.net mvc 使用ajax请求获取数据的时候,我们一般是返回json或者xml,然后解析这些数据进行渲染,这样会比较麻烦,可以请求一个 分部action,返回一个分部视图 直接可以渲染,不 ...

  8. DOM对象 与 jQuery对象 之间的相互装换

    示例代码: //jQuery对象转DOM对象 //因为jQuery对象是一个数组对象,所以转换为DOM对象时要用索引的形式 var $div1 = $("#div1"); //jQ ...

  9. Android 神兵利器—— Git 常用命令

    总结的Android 工具类文章: Android 神兵利器-- Adb 常用命令 Android 神兵利器-- Git 常用命令 在项目研发时,经常使用Git,基本的命令有六个,通过下面的图片我们可 ...

  10. 【原创】高性能网络编程(二)：上一个10年，著名的C10K并发连接问题

    1.前言 对于高性能即时通讯技术(或者说互联网编程)比较关注的开发者,对C10K问题(即单机1万个并发连接问题)应该都有所了解."C10K"概念最早由Dan Kegel发布于其个人 ...