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

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>

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

我能知道我在这里做错了什么吗？

Answer 1

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

这是代码：

 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>