点击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"> ...
随机推荐
- Redis快速入门详解
Redis入门详解 Redis简介 Redis安装 Redis配置 Redis数据类型 Redis功能 持久化 主从复制 事务支持 发布订阅 管道 虚拟内存 Redis性能 Redis部署 Redis ...
- js 函数覆盖的问题
今天遇到奇怪问题是,一个html里面引入一个新的js进来后,原来的按钮点击后(假设触发onclick函数)在某个地方卡住了,不往下执行了.—— 之前都是好好的. 调试发现,在onclick中间某一处调 ...
- MVVM架构~knockoutjs系列之一些异常的总结（永久更新）
返回目录 1 关于attr属性的问题 这个问题主要出现的IE7和360浏览器,使用attr时,需要为属性名加上单引号,代码如下: <a data-bind="attr:{'href': ...
- 拥抱cnpm
在国内由于墙的原因,使用NPM安装模块经常会失败,要或在速度上会慢得跟蜗牛一样,这时候我们其实可以选择国内淘宝的NPM镜像,使用下面的命令来进行安装: npm install -g cnpm --re ...
- Atitit prj 项目管理与行政管理(1)------项目环境的概览与建立
Atitit prj 项目管理与行政管理(1)------项目环境的概览与建立 1. 环境的4大特点 (1)多样性与复杂性. (2)差异性.(3)变异性.(4)关联性.2 2. 环境的分类,最常用使用 ...
- flow.ci Beta 上线，将开发工作流自动化
说起未来,我们会想到自动.智能.机器人...,希望可以从眼前重复繁琐的事情中解放出来,让"机器人"自动智能地帮我们做更多的事情:希望开发可以更自动化.智能化.社会化,更少的资源浪费 ...
- leancloud 用户登录（调用API） 教程
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; ...
- ng-表单验证
表单验证<AngularJs> 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type ...
- SSIS 对数据排序
SSIS 对数据排序有两种方式,一种是使用Sort组件,一种是使用sql command的order by clause进行排序. 一,使用Sort组件进行排序 SortType:升序 ascendi ...
- javascript类型系统——字符串String类型
× 目录 [1]定义 [2]引号 [3]反斜线[4]特点[5]转字符串 前面的话 javascript没有表示单个字符的字符型,只有字符串String类型,字符型相当于仅包含一个字符的字符串 字符串S ...