首先看一下html和css的结构：
<style>
#nav_left{
width:px;
height:px;
background-color:#333;
margin-left:px;
}
.list {
color:#fff;
padding:px;
font-size:px;
}
.list:hover{
cursor:pointer;
color:red;
}
.detail p{
font-size:px;
right: px;
padding-top:px;
}
.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 = ; 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 = ; i < detail.length; i++) {
(function(index){
detail[index].style.display = "none";
})(i);
}
//在利用立即调用函数为每一个list绑定点击事件
for(var i = ; 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:px;
padding:px;
}
div.nav_top{
width:%;
height:px;
background-color:#333;
}
.nav_top .right{
float:right;
margin-right:px;
}
.nav_top img{
width:px;
height:px;
border-radius:px;
background-color:#fff;
border:;
}
.nav_top span{
line-height:px;
color:#fff;
font-size:px;
font-weight:blod;
}
#nav_left{
width:px;
height:px;
background-color:#333;
margin-left:px;
}
.list {
color:#fff;
padding:px;
font-size:px;
}
.list:hover{
cursor:pointer;
color:red;
}
.detail p{
font-size:px;
right: px;
padding-top:px;
}
.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 = ; i < detail.length; i++) {
(function(index){
detail[index].style.display = "none";
})(i);
}
for(var i = ; 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 = ; i< element.length; i++){
if(element[i].className == cls){
result.push(element[i]);
}
}
return result;
}
</script>
</body>
</html>