自己手撸的,记录一下
<meta charset="utf-8">
<style>
.ok,.two{
list-style: none;
200px;
margin-top: 0;
padding-left: 0;
}
.ok li{
background: darkgoldenrod;
}
.d{
height: 35px;
line-height: 35px;
padding-left: 5px;
color: white;
cursor: pointer;
}
.d:nth-of-type(n+1){
margin-top: 5px;
}
.two{
padding-left: 0px;
}
.two li{
background: chocolate;
margin-top: 5px;
padding-left: 10px;
}
.none{
display: none;
}
.block{
display: block;
}
.three{
list-style: none;
}
</style>
<div>
<ul class="ok" id="t">
<li class="d">产品中心</li>
<ul class="two block">
<li>产品系列一</li>
<li>产品系列二</li>
<li>产品系列三</li>
</ul>
<li class="d">新闻中心</li>
<ul class="two block">
<li>公司新闻</li>
<li>行业新闻</li>
</ul>
</ul>
</div>
<script>
var a= document.getElementById("t");
var s=a.children;
for(var i=0;i<=s.length-1;i++){
if(s[i].classList.contains('d')){
s[i].onclick= function () {
var zt=this.nextElementSibling;
console.log(zt);
if (zt.classList.contains('block')){
this.nextElementSibling.setAttribute('class','none');
}
else{
this.nextElementSibling.classList.add('two','block');
}
};
}
}
</script>