点击div折叠
<!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折叠的更多相关文章
- 点击div 跳转并通过URL传参
点击div前要先给div绑定要传的参数: //给panel绑定自定义属性,方便在跳转时传带参数,键/值对排列 panel.attr("user_age",user_age); pa ...
- javascript实现列表的点击展开折叠
<script> window.onload = function() { //要折叠的区域 var catalog = document.getElementById("div ...
- 点击按钮显示隐藏DIV，点击DIV外面隐藏DIV
点击按钮显示隐藏DIV,点击DIV外面隐藏DIV 注意:此方法对touch事件不行,因为stopPropagation并不能阻止touchend的冒泡 <style type="tex ...
- div加链接 html给div加超链接实现点击div跳转的方法[申明：来源于网络]
div加链接 html给div加超链接实现点击div跳转的方法[申明:来源于网络] 地址:http://www.cdxwcx.com/faq/htmldivLink.html
- 21.JQ的监听事件（点击div外面可以让它消失）
JQ的监听事件(点击div外面可以让它消失) //监听整个页面 $(document).bind("click", function() { //给需要的对象赋予事件 $(&quo ...
- 点击Div，显示其innerHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- checkbox复选框和div click事件重叠，点击div后复选框也被选中，同时改变div颜色，否则则不选中
checkbox复选框和div click事件重叠,点击div后复选框也被选中,同时改变div颜色,否则则不选中 <!DOCTYPE html> <html lang=" ...
- 点击div全选中再点击取消全选div里面的文字
想做一个就是点击一个div然后实现的功能是div里面的文字都成选中状态,然后就可以利用浏览器的自带的复制功能,任意复制在哪里去了 在网上百度了一下 然后网上的答案感觉很大的范围 然后一些搜索 然后就锁 ...
- 隐藏<input type="file"> 实现点击div或图片打开文件选择路径
HTML: <input type="file" style="display:none" id="addfile-btn"> ...
随机推荐
- Web开发人员必读的12个网站
The more you actually create, the more you’ll learn.(创造的越多,学习的越多),世界上有无数个开发人员会在网上分享他们的开发经验,我们无法向所有人学 ...
- redis系列-主从复制
redis自身提供了主从的机制,通过配置可以实现服务的备份(Master->Slave). 配置项 slaveof <masterip> <masterport> mas ...
- h5里viewport设置
正确设置: <meta name="viewport" content="width=device-width,initial-scale=1.0"> ...
- Atitit 项目中的勋章体系，，mvp建设 ，荣典体系建设
Atitit 项目中的勋章体系,,mvp建设 ,荣典体系建设 1. 荣典体系的标准1 2. 勋章称号1 2.1.1. 授予标准1 3. 政出多门 统一的荣誉制度 2 3.1. 法则规定2 3.2. ...
- atitit。企业的价值观 员工第一 vs 客户第一.docx
atitit.企业的价值观 员工第一 vs 客户第一.docx 1. 客户第一的说法是错误的,员工优先是正确的,理念与价值观1 1.1. 任何一个组织,应该组织成员优先级要比外部成员高才对1 1.2. ...
- 模糊测试——强制发掘安全漏洞的利器（Jolt 大奖精选丛书）
模糊测试——强制发掘安全漏洞的利器(Jolt 大奖精选丛书) [美]Sutton, M.Greene, A.Amini, P. 著 段念赵勇译 ISBN 978-7-121-21083-9 2013年 ...
- mysql 的简单优化
合理的建立索引的建议: (1) 越小的数据类型通常更好:越小的数据类型通常在磁盘.内存和CPU缓存中都需要更少的空间,处理起来更快. (2) 简单的数据类型更好:整型数据比起字符,处理开销更小,因 ...
- CSS层模型
参考:慕课网 点此可进 如何让html元素在网页中精确定位,就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作.CSS定义了一组定位(positioning)属性来支持层布局模型 ...
- 什么才是正确的javascript数组检测方式
前面的话 对于确定某个对象是不是数组,一直是数组的一个经典问题.本文专门将该问题择出来,介绍什么才是正确的javascript数组检测方式 typeof 首先,使用最常用的类型检测工具——typeof ...
- SQL*Loader之CASE5
CASE5 1. SQL脚本 [oracle@node3 ulcase]$ cat ulcase5.sql set termout off rem host write sys$output &quo ...