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