左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.left{
width: 20%;
height: 500px;
float: left;
background-color: coral;
}
.title{
text-align: center;
line-height: 40px;
background-color: #2aabd2;
color: white;
}
.item{
padding: 10px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="left">
<div class="item">
<div class="title">菜单一</div>
<ul class="con">
<li>111111111111111</li>
<li>111111111111111</li>
<li>111111111111111</li>
</ul>
</div>
<div class="item">
<div class="title">菜单二</div>
<ul class="con hide">
<li>22222222222222</li>
<li>22222222222222</li>
<li>22222222222222</li>
</ul>
</div>
<div class="item">
<div class="title">菜单三</div>
<ul class="con hide">
<li>333333333333333</li>
<li>333333333333333</li>
<li>333333333333333</li>
</ul>
</div>
</div>
<script>
var eles_title=document.getElementsByClassName("title");
for (var i=0;i<eles_title.length;i++){
eles_title[i].onclick=function(){
this.nextElementSibling.classList.remove("hide");
for(var j=0;j<eles_title.length;j++){
if (eles_title[j]!=this){
eles_title[j].nextElementSibling.classList.add("hide")
}
}
}
}
var eles_title = document.getElementsByClassName('title')
for (var i=0;i<eles_title.length;i++){
eles_title[i].onclick=function () {
this.nextElementSibling.classList.remove('hide')
for (var j=0;j<eles_title.length;j++){
if(eles_title[j] != this){
eles_title[j].nextElementSibling.classList.add(('hide'))
/*
nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）；
nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；
*/
}
}
}
}
</script>
</body>
</html>
