先看特效:
style:
<style>
ul{
padding: 0;
margin: 0;
}
.hide{
display: none;
}
.menu{
width: 200px;
height: 500px;
background-color: gray;
border: 2px solid #333;
}
.menu .title{
background-color: blue;
cursor: pointer;
}
.menu .content{
background-color: white;
}
</style>
body:
<div class="menu">
<div class="item">
<div class="title" onclick="Show(this);">菜单一</div>
<div class="content hide">
<ul>
<li>内容1</li>
<li>内容1</li>
<li>内容1</li>
</ul>
</div>
</div>
<div class="item">
<!--arg.下一个标签nex-->
<div class="title" onclick="Show(this);">菜单二</div>
<div class="content hide">
<ul>
<li>内容2</li>
<li>内容2</li>
<li>内容2</li>
</ul>
</div>
</div>
<div class="item">
<div class="title" onclick="Show(this);">菜单三</div>
<div class="content hide">
<ul>
<li>内容3</li>
<li>内容3</li>
<li>内容3</li>
</ul>
</div>
</div>
<div class="item">
<div class="title" onclick="Show(this);">菜单四</div>
<div class="content hide">
<ul>
<li>内容4</li>
<li>内容4</li>
<li>内容4</li>
</ul>
</div>
</div>
</div>
js:
<script>
function Func(arg,a2){
console.log(arg,a2);
}
function Func1(arg){
console.log(arg);
}
function Show(arg){
//arg当前菜单
//console.log(arg);
arg.nextElementSibling.classList.remove('hide');//remove当前的hide属性
var father = arg.parentElement;
var sons = father.parentElement.children;
for (var i=0;i<sons.length;i++){
var current_ele = sons[i];
if(current_ele == father){
}else{
current_ele.children[1].classList.add('hide');
}
}
}
</script>
自己试试吧!