手风琴菜单下拉只适用于第一个下拉

Question

我想用简单的HTML和JS实现一个简单的手风琴下拉菜单。下面是相关的JS、CSS和HTML代码。

var heading = document.getElementsByClassName("drop_title");
var headingNumber = heading.length;
for (var i = 0 ; i < headingNumber; i++) {
heading[i].addEventListener("click", () => {
document.querySelector('.accordion_box li ul').classList.toggle('drop_list')
});
}

.accordion_box {
background: #004d7a;
font-family: 'Zen Kaku Gothic Antique', sans-serif;
color: white;
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
width:50%;
margin-top: 25%;
}
.accordion_box ul li {
list-style-type:none;
}
.drop_title {
font-size:17px;
padding:0 10px;
}
.drop_title:hover{
border-left: 5px solid #a8eb12;
border-bottom: 5px solid #a8eb12;
}
.accordion_box ul ul li a{
color:white;
font-size:14px;
text-decoration:none;
}
.accordion_box ul ul li a:hover{
border-left: 5px solid #a8eb12;
}
.drop_list{
display:none;
}
.accordion_box li.active ul{
display:block;
transition: all 2s ease-in-out;
}

<div class="accordion_box">
<ul>
<li>
<h3 class="drop_title">Menu One</h3>
<ul class="drop_list">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li>
<h3 class="drop_title">Menu Two</h3>
<ul class="drop_list">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li>
<h3 class="drop_title">Menu Three</h3>
<ul class="drop_list">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li>
<h3 class="drop_title">Menu Four</h3>
<ul class="drop_list">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
</ul>
</div>

当我点击菜单一，我可以显示和隐藏列表。但是当我点击其他标题时，不是下拉相关列表，而是下拉菜单1

我能知道我哪里做错了吗?

Answer 1

你可以使用forEach如果你想给所有的元素事件点击，在函数上，你必须给出一个参数，然后你必须通过参数添加事件点击，通过参数你可以选择parent，然后找到你想要切换类的元素。

代码如下:

var heading = document.querySelectorAll(".drop_title");
var headingNumber = heading.length;
heading.forEach(function(el) {
el.addEventListener("click", function() {
el.parentNode.querySelector('.accordion_box li ul').classList.toggle('drop_list');
});
});

.accordion_box {
background: #004d7a;
font-family: 'Zen Kaku Gothic Antique', sans-serif;
color: white;
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
width:50%;
margin-top: 25%;
}
.accordion_box ul li {
list-style-type:none;
}
.drop_title {
font-size:17px;
padding:0 10px;
}
.drop_title:hover{
border-left: 5px solid #a8eb12;
border-bottom: 5px solid #a8eb12;
}
.accordion_box ul ul li a{
color:white;
font-size:14px;
text-decoration:none;
}
.accordion_box ul ul li a:hover{
border-left: 5px solid #a8eb12;
}
.drop_list{
display:none;
}
.accordion_box li.active ul{
display:block;
transition: all 2s ease-in-out;
}

<div class="accordion_box">
<ul>
<li>
<h3 class="drop_title">Menu One</h3>
<ul class="drop_list">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li>
<h3 class="drop_title">Menu Two</h3>
<ul class="drop_list">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li>
<h3 class="drop_title">Menu Three</h3>
<ul class="drop_list">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
<li>
<h3 class="drop_title">Menu Four</h3>
<ul class="drop_list">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</li>
</ul>
</div>