使用forEach绑定折叠菜单点击事件时如何为关联二级元素切换类

问题原因 #

你之前的写法预先选中了页面内全部.category-submenu元素，每次点击都会遍历所有元素切换类，才会出现所有子菜单同步变化的问题。

解决方案 #

从当前点击的按钮出发，沿DOM树查找仅和当前按钮关联的子菜单，单独切换它的类即可。

修正后的JS代码

const catTogglers = document.querySelectorAll(".category-menu__toggle");
catTogglers.forEach(function (catToggle) {
  catToggle.addEventListener("click", function () {
    // 切换当前按钮的状态类
    catToggle.classList.toggle("category-menu__toggle--open");
    // 查找当前按钮对应的子菜单：先找最近的父级菜单项容器，再在容器内匹配子菜单
    const relatedSubmenu = catToggle.closest('.category-menu__item').querySelector('.category-submenu');
    // 仅切换对应子菜单的展开类
    relatedSubmenu.classList.toggle('category-submenu--open');
  });
});

补充CSS（按需添加）

你需要补充.category-submenu--open对应的展开样式，比如默认隐藏子菜单的场景可添加以下规则：

/* 默认隐藏子菜单 */
.category-submenu {
  display: none;
  overflow: hidden;
  transition: all 0.3s ease; /* 可加过渡效果实现平滑展开 */
}
/* 展开状态显示子菜单 */
.category-submenu--open {
  display: block;
}

方案说明 #

用closest('.category-menu__item')查找当前按钮所属的最外层菜单项容器，再通过querySelector在容器内匹配子菜单的写法容错性更高，即便后续调整.category-menu__link和子菜单的DOM层级顺序，也不会影响关联匹配的逻辑。

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