如何实现点击切换多个拥有相同class的列表元素的active状态？

嘿，问题出在你用了document.querySelector('.navbar_item')——这个方法只会选中匹配到的第一个元素，所以自然只有第一个navbar_item能响应点击，也只有它的active状态会被切换。要实现所有元素的状态切换，你需要做这几个修改：

• 用document.querySelectorAll('.navbar_item')替代querySelector，这样能拿到所有匹配的元素集合
• 在切换状态的函数里，遍历所有navbar_item元素来切换active类
• 给每个navbar_item都绑定点击事件

下面是修改后的完整代码：

const menu = document.querySelector('#mobile-menu'); 
const menuMenu = document.querySelector('.navbar_menu'); 
// 获取所有navbar_item元素
const menuItems = document.querySelectorAll('.navbar_item'); 

const mobileMenu = () => { 
  menu.classList.toggle('is-active'); 
  menuMenu.classList.toggle('active'); 
  // 遍历所有元素，切换active状态
  menuItems.forEach(item => {
    item.classList.toggle('active');
  });
}; 

menu.addEventListener('click', mobileMenu); 
// 给每个navbar_item都添加点击监听
menuItems.forEach(item => {
  item.addEventListener('click', mobileMenu);
});

这样修改后，不管点击哪个navbar_item或者移动端菜单按钮，所有的navbar_item都会同步切换active状态啦～

内容的提问来源于stack exchange，提问作者aGreatCook