点击父菜单箭头关闭子子菜单并还原箭头方向的问题求助

原代码核心问题 #

1. 嵌套forEach导致父级箭头被重复绑定事件，触发时逻辑混乱
2. 箭头函数中使用this无法正确指向目标DOM元素
3. 遍历所有子子菜单匹配的逻辑冗余且易出错

修正后的JavaScript代码 #

// Index //
const indexList = document.querySelector('.index-list');
const indexSubmenus = document.querySelectorAll('.index-sub-menu');

// 点击父级箭头时，关闭其下所有子子菜单并重置箭头
indexSubmenus.forEach(submenu => {
  const parentArrow = submenu.parentElement.querySelector('.arrow');
  parentArrow.addEventListener('click', () => {
    // 找到当前子菜单下所有的子子菜单
    const childSubmenus = submenu.querySelectorAll('.index-sub-menu-sub-menu');
    childSubmenus.forEach(childSub => {
      // 关闭子子菜单
      childSub.classList.add('hidden');
      // 重置对应箭头状态
      const childArrow = childSub.parentElement.querySelector('.arrow');
      if (childArrow) {
        childArrow.classList.remove('rotatearrow');
      }
    });
  });
});

// 切换一级子菜单显示/隐藏
function openSubmenus(e) {
  const target = e.target;
  if (target.classList.contains('arrow')) {
    const parentLi = target.parentElement;
    const submenu = parentLi.querySelector('.index-sub-menu');
    if (submenu) {
      submenu.classList.toggle('hidden');
      target.classList.toggle('rotatearrow');
    }
  }
}

// 切换子子菜单显示/隐藏
function openSubmenusSubmenus(e) {
  const target = e.target;
  if (target.classList.contains('arrow')) {
    const parentLi = target.parentElement;
    const subSubmenu = parentLi.querySelector('.index-sub-menu-sub-menu');
    if (subSubmenu) {
      subSubmenu.classList.toggle('hidden');
      target.classList.toggle('rotatearrow');
    }
  }
}

indexList.addEventListener('click', openSubmenus);
indexList.addEventListener('click', openSubmenusSubmenus);

代码说明 #

1. 父级箭头关闭逻辑：

   • 遍历每个一级子菜单，绑定其父级箭头的点击事件
   • 点击时直接在当前一级子菜单范围内查找所有子子菜单，统一执行关闭和箭头重置操作，避免全局遍历匹配的冗余

2. 切换逻辑优化：

   • 改为通过类名判断点击目标，不再依赖固定索引查找子元素，适配DOM结构变化
   • 使用querySelector直接定位对应菜单元素，代码更健壮

效果验证 #

点击一级菜单箭头时：

• 正常切换一级子菜单的显示/隐藏状态
• 自动关闭该一级子菜单下所有已展开的子子菜单，并将对应箭头转回初始状态

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