我有下面这段代码,这是一个网站的移动的导航部分使用。
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
。