通过寻找父级节点 寻找兄弟节点 实现的简单目录效果
.parentNode 寻找父级
.children 寻找所以子级
.classList.toggle("show");//切换样式
.querySelectorAll//寻找该元素里所有的子元素
下面是js代码
var div1=document.querySelectorAll("#odiv .div1")
for(let i=0;i<div1.length;i++)
{
div1[i].addEventListener("click",function(){
var zi=this.querySelector(".u1");
zi.classList.toggle("show");
var ss=this.parentNode.children;
for (let v=0;v<div1.length;v++) {
if(ss[v] !== this)
{
ss[v].querySelector(".u1").classList.remove("show")
}
}
});
html
<div id="odiv">
<div class="div1">
<h5 class="h5">标题1</h5>
<ul class="u1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="div1">
<h5 class="h5">标题2</h5>
<ul class="u1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="div1" >
<h5 class="h5">标题3</h5>
<ul class="u1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
css
<style>
body,h5,ul{
padding: 0;
margin: 0;
}
ul,li{
list-style: none;
}
#odiv{
width: 300px;
height: auto;
}
#odiv .div1{
}
#odiv .div1 .h5{
margin: 0;
width: 300px;
height: 30px;
display: inline-block;
text-align: center;
line-height: 30px;
background-color:#C0C0C0 ;
}
#odiv .u1{
height: 0px;
overflow: hidden;
transition: all .6s ;
}
#odiv .show{
height: 100px;
}
#odiv .u1>li
{
width: 300px;
height: 24px;
border-bottom: solid 1px #FFFFFF;
text-align: center;
background: #23527C;
color: #FFFFFF;
}
</style>
大佬勿喷