左侧菜单
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<style>
.hide{
display: none;
}
.menu .head{
height:38px;
background-color: #2459a2;
line-height: 38px;
}
</style>
</head>
<body>
<div style="height: 48px ;border: 1px solid red"></div>
<div style="width:300px ;border: 1px solid red ">
<div class="menu">
<div id='a1' class="head " onclick="caidan('a1')">菜单1</div>
<div class="conent">
<div clas="item">内容1</div>
<div clas="item">内容1</div>
<div clas="item">内容1</div>
</div>
</div> <div class="menu">
<div id='a2' class="head " onclick="caidan('a2')">菜单2</div>
<div class="conent hide">
<div clas="item">内容2</div>
<div clas="item">内容2</div>
<div clas="item">内容2</div>
</div>
</div> <div class="menu">
<div id='a3' class="head" onclick="caidan('a3')">菜单3</div>
<div class="conent hide">
<div clas="item">内容3</div>
<div clas="item">内容3</div>
<div clas="item">内容3</div>
</div>
</div> <div class="menu">
<div id='a4' class="head" onclick="caidan('a4')">菜单4</div>
<div class="conent hide">
<div clas="item">内容4</div>
<div clas="item">内容4</div>
<div clas="item">内容4</div>
</div>
</div> </div>
<script> function caidan(nod) {
var head=document.getElementById(nod);
curr_meu=head.parentElement.parentElement.children;
for (var i=0; i<curr_meu.length; i++){
var item_list=curr_meu[i];
item_list.children[1].classList.add('hide');
}
head.nextElementSibling.classList.remove('hide')
}
</script>
</body>
</html>
左侧菜单