点击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"> ...
随机推荐
- 使用aggregate在MongoDB中查找重复的数据记录
我们知道,MongoDB属于文档型数据库,其存储的文档类型都是JSON对象.正是由于这一特性,我们在Node.js中会经常使用MongoDB进行数据的存取.但由于Node.js是异步执行的,这就导致我 ...
- Atom
http://blog.csdn.net/crper/article/details/45647459
- Atitit 视频编码与动画原理attilax总结
Atitit 视频编码与动画原理attilax总结 1.1. 第一步:实现有损图像压缩和解压1 1.2. 接着将其量化,所谓量化,就是信号采样的步长,1 1.3. 第二步:实现宏块误差计算2 1.4. ...
- Java集合框架的总结
本篇文章先从整体介绍了Java集合框架包含的接口和类,然后总结了集合框架中的一些基本知识和关键点,并结合实例进行简单分析.当我们把一个对象放入集合中后,系统会把所有集合元素都当成Object类的实例进 ...
- Linux初学 - 解决chkconfig Segmentation fault(core dumped)
yum install *chkconfig*
- Linux初学 - Elasticsearch环境安装
下载 https://www.elastic.co/downloads/elasticsearch 安装 rpm -ivh 也可以双击rpm包安装 修改elastaticsearch host配置 修 ...
- iOS-ARC
1. 本文的主要内容: ARC的本质 ARC的开启与关闭 ARC的修饰符 ARC与Block ARC与Toll-Free Bridging ARC的本质 ARC是编译器(时)特性,而不是运行时特性,更 ...
- 使用__slots__限定实例的成员列表
使用__slots__限定实例的成员列表 默认情况下,python对象队象的每个实例(instance)都会有一个字典来存储该实例的属性,这样做的好处在于运行时期每个对象可以任意设置新的属性.而相对应 ...
- java基础-复制
package hanqi.test; import java.io.FileInputStream; import java.io.FileOutputStream; public class Te ...
- 快速入门系列--GIT版本控制工具
由于GIT刚刚开始使用不久,经常会在Merge时出现没有change-id的情况,在结合gerrit使用时,经常出现不能提交的情形,使得自己很困扰.最近有次熬夜加班,在代码完成后,由于多人在很短时间内 ...