首先看一下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"> <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"> <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>
