js实现点击div隐藏相应部分，再次点击显示

首先看一下html和css的结构：

<style>
#nav_left{width:120px;height:600px;background-color:#333;margin-left:0px;
}
.list {color:#fff;padding:10px;font-size:18px;
}.list:hover{cursor:pointer;color:red;
}.detail p{font-size:16px;right: 10px;padding-top:10px;
}.detail p:hover{color:#fff;
}</style><body>
<div class = "nav_top"><div class = "right"><img src = "./img/surf.jpg">&nbsp;&nbsp;<span> 欢迎:${requestScope.name}</span></div>
</div><div id = "nav_left"><div class = "list">系统管理<img src="./images/heshang.png"></div><div class = "detail"><p>系统</p><p>系统</p><p>系统</p></div><div class = "list">日程管理<img src="./images/heshang.png"></div><div class = "detail"><p>日程管理</p><p>日程管理</p><p>日程管理</p></div><div class = "list">日报统计<img src="./images/heshang.png"></div><div class = "detail"><p>日报统计</p><p>日报统计</p><p>日报统计</p></div>
</div>

点击list时相应的现实detail，再次点击合上，旁边还有一个小图标。

效果就是这样：
首先获得所有的list和detail,这里用自己写的一个函数获得所有的class为list和dtail的标签。
函数如下：

 unction getByClassName(obj,cls){
// obj目标元素，cls要获得的class名var element = obj.getElementsByTagName('*');//将目标下的所有子元素获取到var result = []; //定义一个数组，存放获得的classname = "cls" 的所有值for(var i = 0; i< element.length; i++){if(element[i].className == cls){result.push(element[i]);}}return result;}

返回一个数组，接下来先获取到所有用的标签

var nav_left = document.getElementById("nav_left");
var list = getByClassName(nav_left,'list');
var img = nav_left.getElementsByTagName('img');
console.log(list);
var detail = getByClassName(nav_left,'detail');
console.log(detail);//主要的函数
function dianji(){//先初始化所有的detail显示为none，利用立即调用函数为每一个绑定所有的detail显示为none；
for (var i = 0; i < detail.length; i++) {(function(index){detail[index].style.display = "none";})(i);}//在利用立即调用函数为每一个list绑定点击事件
for(var i = 0; i< list.length; i++){(function(value){list[value].onclick = function(){toggle(detail[value],img[value]);}})(i);}
}
dianji();//使用toggle()函数进行判断，为每一个detail添加相应的动作。
function toggle(element,img){if(element.style.display == "none"){element.style.display = "block";img.src = "./images/zhankai.png";}else if(element.style.display == "block"){element.style.display = "none";img.src = "./images/heshang.png";}else{alert('chucuo');}
}

下面附上完整的源码


<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>成功页</title>
<style type="text/css">@CHARSET "UTF-8";
*{margin:0px;padding:0px;
}
div.nav_top{width:100%;height:60px;background-color:#333;
}.nav_top .right{float:right;margin-right:100px;
}
.nav_top img{width:50px;height:50px;border-radius:25px;background-color:#fff;border:0;
}
.nav_top span{line-height:60px;color:#fff;font-size:16px;font-weight:blod;}#nav_left{width:120px;height:600px;background-color:#333;margin-left:0px;
}
.list {color:#fff;padding:10px;font-size:18px;
}.list:hover{cursor:pointer;color:red;
}.detail p{font-size:16px;right: 10px;padding-top:10px;
}.detail p:hover{color:#fff;
}</style>
</head>
<body>
<div class = "nav_top"><div class = "right"><img src = "./img/surf.jpg">&nbsp;&nbsp;<span> 欢迎:${requestScope.name}</span></div>
</div><div id = "nav_left"><div class = "list">系统管理<img src="./images/heshang.png"></div><div class = "detail"><p>系统</p><p>系统</p><p>系统</p></div><div class = "list">日程管理<img src="./images/heshang.png"></div><div class = "detail"><p>日程管理</p><p>日程管理</p><p>日程管理</p></div><div class = "list">日报统计<img src="./images/heshang.png"></div><div class = "detail"><p>日报统计</p><p>日报统计</p><p>日报统计</p></div></div><script src = "./layui/layui/layui.js"></script>
<script>var nav_left = document.getElementById("nav_left");
var list = getByClassName(nav_left,'list');
var img = nav_left.getElementsByTagName('img');
console.log(list);
var detail = getByClassName(nav_left,'detail');
console.log(detail);function dianji(){for (var i = 0; i < detail.length; i++) {(function(index){detail[index].style.display = "none";})(i);}
for(var i = 0; i< list.length; i++){(function(value){list[value].onclick = function(){toggle(detail[value],img[value]);}})(i);}
}
dianji();
function toggle(element,img){if(element.style.display == "none"){element.style.display = "block";img.src = "./images/zhankai.png";}else if(element.style.display == "block"){element.style.display = "none";img.src = "./images/heshang.png";}else{alert('chucuo');}
}function getByClassName(obj,cls){// obj目标元素，cls要获得的class名var element = obj.getElementsByTagName('*');//将目标下的所有子元素获取到var result = []; //定义一个数组，存放获得的classname = "cls" 的所有值for(var i = 0; i< element.length; i++){if(element[i].className == cls){result.push(element[i]);}}return result;}
</script>
</body>
</html>

js实现点击div隐藏相应部分，再次点击显示相关推荐

【Android】点击按钮播放音乐，再次点击停止播放
1.在res下新建raw文件夹将音频复制粘贴至文件夹 2.代码 (1)PlatformActivity.java public static int cnt = 0;SoundPool sp;//声 ...
点击按钮变成灰色不可再次点击
原文转载自http://www.santii.com/article/24.html 很多时候,当我们点击提交按钮,如果因为执行的程序太慢,或是网络问题,就会一直处于提交状态. 不了解的人,还以为是没 ...
点击图片进行放大，再次点击就缩小到原来的地方
首先写一个类写放大缩小的方法 // // BigImage.h // TapImageBigAndSmall // // Created by lxy on 15-4-7. // Copyrigh ...
（完美解决）App点击Home键后，再次点击APP图标，APP重启回不到点击home键前的那个界面
在这个即将国庆的日子里,碰到这么个神奇的bug:经过查找发现竟然是前人留下来的坑: 在你的LAUNCHER的Activity里面查看是否有 android:launchMode="singl ...
js实现点击div以外区域，隐藏div区域
页面刚开始刷新时,是显示的: 点击左侧按钮.其他区域或右侧关闭按钮都可以使其隐藏,再点击左侧按钮显示: 注:先引入jQuery版本 JS <script type="text/java ...
js点击显示div，点击取消隐藏div
js点击显示div,点击取消隐藏div <script language="javascript" type="text/javascript"> ...
如何实现点击div区域外隐藏div区域
1 遮罩层,有一个遮罩层,盖住其他地方,然后只有目标div可以点击,点击遮罩层就可以隐藏: 2.body上绑定事件,关闭,组件销毁前把事件移除. <div id="badge" ...
js-点击div之外，隐藏div
点弹窗之外,隐藏弹窗,或点击div之外,隐藏div 其实原理总结就两句话: 给整个document添加监听点击事件,隐藏div 给div添加监听点击事件,阻止冒泡代码实现 html代码 <bo ...
原生js设置div隐藏或者显示_10种JS控制DIV的显示隐藏代码
div隐藏与显示 #menus { background-color: #c4cff0; } function Layer_HideOrShow(cur_div) { var current=docu ...

js实现点击div隐藏相应部分，再次点击显示

js实现点击div隐藏相应部分，再次点击显示相关推荐

最新文章

热门文章