使用document.querySelectorAll切换多个类实例时遇到的问题求助

嗨，我来帮你梳理下代码里的问题，其实主要是三个点没处理对：

• 不能直接给NodeList绑定事件：querySelectorAll返回的是一个元素集合（NodeList），不是单个DOM元素，所以你直接写toggleButton.addEventListener是无效的——集合本身没有这个方法，得遍历集合里的每个按钮，分别绑定点击事件才行。
• 循环里没正确访问单个元素：你在toggleMenuItems函数里写的toggleButton.classList，这里的toggleButton还是整个集合，不是单个按钮，得用toggleButton[i]来访问循环里的每一个按钮，子菜单同理。
• 逻辑不符合实际需求：你的代码会把所有按钮和子菜单同步切换状态，但实际应该是点击某个按钮，只切换它对应的那个子菜单，对吧？原来的写法不管点哪个按钮，所有菜单都会一起开/关，这肯定不是你想要的。

给你改好的代码，这个版本会让每个按钮只控制自己对应的子菜单：

// 获取所有切换按钮，变量名改成复数更清晰
const toggleButtons = document.querySelectorAll(".header__nav-mobile .toggle");

// 遍历每个按钮，单独绑定点击事件
toggleButtons.forEach(button => {
  button.addEventListener("click", function() {
    // 找到当前按钮对应的子菜单：先找最近的父级菜单容器，再找里面的子菜单
    const parentMenuItem = this.closest(".menu-item-has-children");
    const subMenu = parentMenuItem.querySelector(".sub-menu");
    
    // 用toggle方法直接切换类，比if-else更简洁
    this.classList.toggle("open");
    subMenu.classList.toggle("open");
  });
});

解释下这段代码的逻辑：

1. 用forEach遍历所有按钮，给每个按钮单独加点击事件；
2. 点击时用this指代当前被点击的按钮，避免混淆；
3. 用closest(".menu-item-has-children")找到当前按钮所在的父级菜单容器，这样就能精准定位到对应的子菜单，不会影响其他菜单；
4. 用classList.toggle方法替代原来的if-else，一行代码就能完成类的添加/移除，更简洁。

另外，原来的代码里还有几个小语法问题，比如toggleButton .classList中间多了空格，虽然不报错，但规范写法是不要空格的哦～

备注：内容来源于stack exchange，提问作者Johnny