无法使用查询选择器全部打开下拉菜单

Question

我有一个带有两个下拉菜单的移动导航。下面是导航的标记:

<div id="mobile-menu" class="mobile-menu container fixed">
<ul>
<li><a href="#">Home</a></li>
<li class="dropdown">
<a href="#">Articles <i class="bi bi-chevron-down"></i></a>
<ul class="submenu hidden">
<li><a href="#">Submenu item 1</a></li>
<li><a href="#">Submenu item 2</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#">My account <i class="bi bi-chevron-down"></i></a>
<ul class="submenu hidden">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Profile</a></li>
</ul>
</li>
</ul>
</div>

下拉菜单应该打开/展开时，单击。最初，我像这样抓取下拉菜单和子菜单类:

const mobileDropdown = document.querySelector(".dropdown");
const mobileSubMenu = document.querySelector('.submenu');

并使用一个事件监听器来切换"隐藏"类，它只是一个显示:none

mobileDropdown.addEventListener('click', () => {
mobileSubMenu.classList.toggle('hidden');
});

这样做的问题是，这只会打开第一个下拉菜单，而我无法打开第二个。

当我尝试使用querySelectorAll而不仅仅是querySelector时，我得到thiserror:

未捕获typeError addEventListener不是一个函数

这里我读到querySelectorAll我需要使用for或foreach循环。

但是我想我把它搞砸了。我试过了:

const mobileDropdown = document.querySelectorAll(".dropdown");
const mobileSubMenu = document.querySelector('.submenu');
mobileDropdown.forEach(md => md.addEventListener('click', () => {
mobileSubMenu.classList.toggle('hidden');
}));

现在我没有得到一个错误，我可以打开第一个下拉菜单，但当我试图打开第二个下拉菜单，第一个打开。我做错了什么?提前谢谢。

Answer 1

你的代码中的问题是，每个mobileDropdown的clickEvent被链接到第一个submenu，你应该链接mobileDropdown的clickEvents到他们的submenu子，如

document.querySelectorAll(".dropdown").forEach(md => md.addEventListener('click', () => {
md.querySelector(".submenu").classList.toggle('hidden');
}));

.hidden {
visibility: hidden;
}

<div class="mobile-menu container fixed" id="mobile-menu">
<ul>
<li><a href="#">Home</a></li>
<li class="dropdown">
<a href="#">Articles <i class="bi bi-chevron-down"></i></a>
<ul class="submenu hidden">
<li><a href="#">Submenu item 1</a></li>
<li><a href="#">Submenu item 2</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#">My account <i class="bi bi-chevron-down"></i></a>
<ul class="submenu hidden">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Profile</a></li>
</ul>
</li>
</ul>
</div>

Answer 2

这里有一个解决方案。你必须收听'click'事件的' submenu ';在"dropdown"元素

const mobileDropdown = document.querySelectorAll(".dropdown");
mobileDropdown.forEach((md) => {
md.addEventListener("click", () => {
const mobileSubMenu = md.querySelector(".submenu");
mobileSubMenu.classList.toggle("hidden");
});
});

Answer 3

mobileSubMenu永远是第一位!