循环浏览下拉菜单项，将类添加到香草JS中的下一个同级

Question

我正在学习JavaScript，并试图创建一个导航大菜单。基本上，每个按钮后面都有一个div，其中包含megamenu内容。悬停或单击按钮会在下拉列表中添加一个类(我也可以在JS中使用显示/隐藏，不确定哪一个更好(。该类为div添加了不透明度和可见性。

我创建了一个"；容器"；变量，所以它只在导航栏中侦听，然后循环通过按钮添加带有nextElementSibling的侦听器，但我似乎无法使其工作。

标记：

<nav id="main-nav">
<div class="nav-content">

<div class="nav-item">
<button class="nav-dropdown">Services</button>
<div class="nav-submenu">
(Links)
</div>
</div>
<div class="nav-item">
<button class="nav-dropdown">Locations</button>
<div class="nav-submenu">
(Links)
</div>
</div>
<div class="nav-item">
<button class="nav-dropdown">About Us</button>
<div class="nav-submenu">
(Links)
</div>
</div>

</div>
</nav>

JS:

( function() {
// initiating vars
var desktop, mobile, container;
// Breakpoints
desktop = window.matchMedia("(min-width: 769px)");
mobile = window.matchMedia("(max-width: 768px)");
// Target only navbar
container = document.getElementById( 'main-nav' ); 
if ( ! container ) {
return;
}
// Desktop dropdown click controls
if (desktop.matches) {
// only look for .nav-dropdown class
const desktopParents = container.querySelectorAll(".nav-dropdown");
// get each instance of .nav-dropdown
for (const desktopParent of desktopParents) {

// if a button is clicked, add class to that button's dropdown only
document.addEventListener('click', function(event) {
// getting correct dropdownby targeting next sibling of button (div.nav-submenu) 
var dropdown = desktopParent.nextElementSibling;
var desktopParent = desktopParent.contains(event.target);

// adding and removing show dropdown class
if (dropdown.classList.contains('nav-active')) {
dropdown.classList.remove('nav-active');

} else {
dropdown.classList.add('nav-active');

}
});
}
}

}() );

Answer 1

您的事件侦听器连接到整个文档，因此当有人单击页面上的任何位置时都会触发事件。将document更改为单击按钮时要触发的事件的按钮变量desktopParent。您可以在事件侦听器的回调函数中使用this引用按钮元素。

desktopParent.addEventListener('click', function(event) {
// getting correct dropdownby targeting next sibling of button (div.nav-submenu) 
var dropdown = this.nextElementSibling;
var desktopParent = this.contains(event.target);
...
}

以下是的示例