我有下面这段代码，这是一个网站的移动的导航部分使用。
const toggleButton = document.querySelector(".header__nav-mobile .toggle");
const subMenu = document.querySelector(".header__nav-mobile .menu-item-has-children .sub-menu");
function toggleMenuItems() {
if (toggleButton .classList.contains("open")) {
toggleButton.classList.remove("open");
subMenu.classList.remove("open");
} else {
toggleButton.classList.add("open");
subMenu.classList.add("open");
}
}
toggleButton.addEventListener("click", toggleMenuItems);这非常好用，但只适用于第一项，所以我现在使用下面的querySelectorAll，但没有用。
const toggleButton = document.querySelectorAll(".header__nav-mobile .toggle");
const subMenu = document.querySelectorAll(".header__nav-mobile .menu-item-has-children .sub-menu");
function toggleMenuItems() {
for (let i = 0; i < toggleButton.length; i++) {
if (toggleButton.classList.contains("open")) {
toggleButton .classList.remove("open");
subMenu.classList.remove("open");
} else {
toggleButton.classList.add("open");
subMenu.classList.add("open");
}
}
}
toggleButton.addEventListener("click", toggleMenuItems);有人能指出我哪里做错了吗？
1条答案
按热度按时间svmlkihl1#
当你运行querySelector()的时候，你会得到一个DOM Element，你可以在其中添加你的事件监听器，但是当你运行querySelectorAll()的时候，你会得到一个返回的NodeList，你需要遍历它来给所有的元素添加事件监听器，你需要像一个数组一样遍历它来给所有的
toggleButton添加事件监听器。现在，您需要稍微修改一下
toggleMenuItems函数，并通过传入您计划在其中切换的任何元素来使其更纯粹。我将每个toggleButton传入toggleMenuItems侦听器，然后让它查询特定toggleButton的正确subMenu。根据您编写
html的方式，将决定您如何在toggleMenuItems函数中访问正确的subMenu。