多组相似ID/类导航栏绑定事件监听器的问题与解决方案

嘿，我来帮你理清楚你遇到的问题，顺便给你一个比现有方案更简洁、可维护的实现方式～

你最初代码报错的原因 #

你写的代码有两个关键错误：

• querySelectorAll参数用错了：这个方法只接受单个字符串参数，多个选择器要放在同一个字符串里用逗号分隔（比如document.querySelectorAll("#openCloseNav, #openCloseNav-c")），你传了两个独立参数，导致实际只拿到了第一个选择器的元素。而且就算传对了，querySelectorAll返回的是NodeList节点集合，不是单个DOM元素，不能直接调用addEventListener，必须遍历集合里的每个元素才行。
• classList.toggle用法不对：toggle一次只能处理一个类名，你传入"toggle toggle-c"是无效的，而且你的两组导航栏对应不同的样式类，本来就不该混在一起切换。

你的现有解决方案可行，但代码太冗余 #

你分开循环两组元素的方式确实能解决问题，但如果以后要加第三组、第四组导航栏，就得复制粘贴重复的代码，维护起来特别麻烦。

更优雅的实现：用数据属性统一管理 #

咱们可以给每个切换按钮加自定义数据属性，把按钮对应的导航栏ID、要切换的类名都存在属性里，这样只用一段代码就能处理任意多组导航栏：

第一步：给HTML元素加数据属性 #

给每个切换按钮加上三个数据属性，分别对应目标导航栏、按钮要切换的类、导航栏要切换的类：

<button id="openCloseNav" data-target="#menuNav" data-btn-class="toggle" data-nav-class="navOpen">
  切换导航1
</button>
<nav id="menuNav">导航栏1</nav>

<button id="openCloseNav-c" data-target="#menuNav-c" data-btn-class="toggle-c" data-nav-class="navOpen-c">
  切换导航2
</button>
<nav id="menuNav-c">导航栏2</nav>

第二步：统一绑定事件的JS代码 #

// 获取所有带data-target属性的切换按钮
const navToggles = document.querySelectorAll('[data-target]');

// 遍历每个按钮绑定点击事件
navToggles.forEach(toggle => {
  toggle.addEventListener('click', () => {
    // 从数据属性里拿到需要的信息
    const targetNav = document.querySelector(toggle.dataset.target);
    const btnClass = toggle.dataset.btnClass;
    const navClass = toggle.dataset.navClass;

    // 切换类名
    toggle.classList.toggle(btnClass);
    targetNav.classList.toggle(navClass);
  });
});

这样不管以后你加多少组导航栏，只要给按钮加上对应的data-*属性，JS代码完全不用改，既简洁又好维护～

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