点击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"> ...
随机推荐
- Spring Trasnaction管理（2）- 事务AOP
问题导读 spring AOP是在如何进行的 spring 用cglib和jdkProxy管理的事务有何区别 Spring AOP管理 Spring主要的两个核心功能IOC与AOP.IOC的代码解析可 ...
- Centos 重置密码
1.在开机启动的时候能看到引导目录,用上下方向键选择你忘记密码的那个系统,然后按“e”. 2.接下来你可以看到如下图所示的画面,然后你再用上下键选择最新的内核,然后在按“e”. 3.执行完上步操作后可 ...
- CocoaPods 使用
为什么要使用这个玩意呢,最近在使用swift开发项目,使用 swift 开源库的时候,在git上下载后居然不知道哪些是必须文件,还要思考下,看看哪些是需要的(不像原来oc开源库,一目了然),网上使用d ...
- Atitit 为什么网络会有延时 电路交换与分组交换的区别
Atitit 为什么网络会有延时 电路交换与分组交换的区别 按道理,网络是电子设备联网,应该达到光速才对.. 本质上因为互联网基于分组交换而不是电路交换. 分组交换相当于队列方式,别人发你的数据包先存 ...
- 发现一个百度的密码。。。记最近一段时间的php感想
请看图. 突然想看一下百度的cookie. 最近百度一年真是多攒多难,我一直挺百度啊.百度文化就是程序员文化,但是收到中国其他文化的侵蚀,不得不变, 任何人重构系统,都会有大概百分三十左右的性能提升. ...
- Hadoop学习笔记【分布式文件系统学习笔记】
分布式文件系统介绍 分布式文件系统:Hadoop Distributed File System,简称HDFS. 一.HDFS简介 Hadoop分布式文件系统(HDFS)被设计成适合运行在通用硬件(c ...
- 对于System.Net.Http的学习（二）——使用 HttpClient 进行连接
对于System.Net.Http的学习(一)——System.Net.Http 简介 使用 HttpClient 进行连接 使用 System.Net.Http 命名空间中的 HttpClient ...
- Model-View-Controller(MVC) is an architectural pattern that frequently used in web applications. Which of the following statement(s) is(are) correct?
Model-View-Controller(MVC) is an architectural pattern that frequently used in web applications. Whi ...
- VS报错:_CRT_SECURE_NO_WARNINGS
常见报错:warning C4996: 'fopen': This function or variable may be unsafe. Consider using fopen_s instead ...
- 深入入门系列--Data Structure--04树
终于有机会重新回头学习一下一直困扰自身多年的数据结构了,赶脚棒棒哒.一直以来,对数据结构的掌握基本局限于线性表,稍微对树有一丢丢了解,而对于图那基本上就是不懂(不可否认,很多的考试中回避了图也是原因之 ...