标签:odiv 下拉窗 寻找 300px height width js 目录 div1
通过寻找父级节点 寻找兄弟节点 实现的简单目录效果
.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>
e黑子 发布了4 篇原创文章 · 获赞 0 · 访问量 24 私信 关注大佬勿喷
标签:odiv,下拉窗,寻找,300px,height,width,js,目录,div1 来源: https://blog.csdn.net/qq_41801219/article/details/104588839
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。