利用 JS 制作一个下拉列表(进阶版)
作者:互联网
利用 JS 制作一个下拉列表(进阶版) 直接上代码
var w1 = document.querySelectorAll("#odiv .w1");
for (let i=0 ;i<w1.length ; i++) {
w1[i].addEventListener("click",function(){
var div1 = w1[i].querySelector("#odiv .w1 .font2");
div1.classList.toggle("show");
var er=this.parentNode.children;
for (let f=0;f<er.length;f++) {
if(er[f]!==this){
er[f].querySelector(".font2").classList.remove("show");
}
}
})
}
var dd2=document.querySelectorAll("#odiv .w1 .font2 .div4")
for (let v=0;v<dd2.length;v++) {
dd2[v].addEventListener("click",function(){
event.stopPropagation();
var div2= dd2[v].querySelector("#odiv .div4 .dd1");
div2.classList.toggle("show1");
var fu = this.parentNode.children
for(let s=0;s<fu.length;s++)
{
if( fu[s] !== this){
console.log(fu[s]);
fu[s].querySelector(".div4 .dd1").classList.remove("show1");
}
}
})
}
前端
<div id="odiv">
<div class="w1">
<div class="font1 ">新闻1</div>
<div class="font2">
<div class="div4 ">
<h5 class="h5">文字1</h5>
<ul class="dd1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="div4 ">
<h5 class="h5">文字1</h5>
<ul class="dd1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="div4 ">
<h5 class="h5">文字1</h5>
<ul class="dd1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
<div class="w1">
<div class="font1 ">新闻1</div>
<div class="font2">
<div class="div4 ">
<h5 class="h5">文字1</h5>
<ul class="dd1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="div4 ">
<h5 class="h5">文字1</h5>
<ul class="dd1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="div4 ">
<h5 class="h5">文字1</h5>
<ul class="dd1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
<div class="w1">
<div class="font1 ">新闻1</div>
<div class="font2">
<div class="div4 ">
<h5 class="h5">文字1</h5>
<ul class="dd1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="div4 ">
<h5 class="h5">文字1</h5>
<ul class="dd1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="div4 ">
<h5 class="h5">文字1</h5>
<ul class="dd1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
</div>
css
body,h5,ul{
padding: 0;
margin: 0;
}
ul,li{
list-style: none;
}
#odiv{
width: 300px;
height: auto;
}
#odiv .w1{
width: 300px;
height: auto;
}
#odiv .w1 .font1{
width: 300px;
height: 29px;
border-bottom: 1px solid blue;
text-align: center;
line-height: 30px;
background: #C0C0C0;
}
#odiv .w1 .font2{
height: 0;
overflow: hidden;
}
#odiv .w1 .show
{
height: auto;
}
#odiv .w1 .div4 .h5{
width: 300px;
height: 29px;
border-bottom: 1px solid #FFFFFF;
text-align: center;
line-height: 30px;
background: cadetblue;
}
#odiv .w1 .div4 .dd1{
height: 0;
overflow: hidden;
}
#odiv .w1 .div4 .show1{
height: 100px;
}
#odiv .w1 .div4 .dd1>li{
height: 24px;
background: #000000;
color: #FFFFFF;
text-align: center;
border-bottom: 1px solid red;
}
e黑子
发布了5 篇原创文章 · 获赞 0 · 访问量 83
私信
关注
标签:文字,div4,odiv,进阶,JS,height,width,w1,列表 来源: https://blog.csdn.net/qq_41801219/article/details/104598207