纯JS手风琴菜单层级展开关闭异常问题求助

问题根源 #

点击二级submenu时，事件会向上冒泡触发一级menu的点击事件，导致所有菜单被关闭。

修复步骤及代码修改 #

1. 阻止二级菜单事件冒泡
   在二级submenu的点击处理函数中添加event.stopPropagation()，避免触发一级菜单的关闭逻辑。

2. 分离一、二级菜单的展开/关闭逻辑
   分别控制一级菜单的子菜单和二级菜单的链接列表，确保操作互不干扰：

// 处理一级菜单逻辑
document.querySelectorAll('.menu').forEach(menu => {
  menu.addEventListener('click', () => {
    // 关闭所有一级菜单的子菜单
    document.querySelectorAll('.menu .submenu-list').forEach(list => {
      list.style.display = 'none';
    });
    // 切换当前一级菜单的子菜单状态
    const targetSubmenu = menu.querySelector('.submenu-list');
    targetSubmenu.style.display = targetSubmenu.style.display === 'block' ? 'none' : 'block';
  });
});

// 处理二级菜单逻辑
document.querySelectorAll('.submenu').forEach(submenu => {
  submenu.addEventListener('click', (event) => {
    // 阻止事件冒泡到一级菜单
    event.stopPropagation();
    // 关闭所有二级菜单的链接列表
    document.querySelectorAll('.submenu .link-list').forEach(list => {
      list.style.display = 'none';
    });
    // 切换当前二级菜单的链接列表状态
    const targetLinks = submenu.querySelector('.link-list');
    targetLinks.style.display = targetLinks.style.display === 'block' ? 'none' : 'block';
  });
});

效果说明 #

• 点击一级menu：仅展开当前menu的子菜单，自动关闭其他所有一级menu的展开项。
• 点击二级submenu：仅展开当前submenu的链接列表，自动关闭其他所有二级submenu的展开项，且不会影响一级菜单的展开状态。

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