如何实现嵌套HTML结构的三级Offcanvas菜单正确展开收起切换？

问题根源 #

1. 事件冒泡：嵌套HTML结构导致点击二级菜单时，事件向上冒泡触发一级菜单的is-open类切换，引发菜单行为异常。
2. 未区分菜单层级：原JS对所有.navigation-offcanvas-list-item统一处理，包括无下级菜单的最终链接，逻辑混乱。
3. CSS选择器错误：控制三级菜单展开的选择器层级错误，导致样式触发逻辑失效。

修复步骤 #

1. 修改JavaScript代码

解决事件冒泡问题，优化切换逻辑仅对有下级菜单的项生效：

const items = document.querySelectorAll('.navigation-offcanvas-list-item');

items.forEach(item => {
  item.addEventListener('click', event => {
    // 阻止事件冒泡，避免触发父级菜单的点击事件
    event.stopPropagation();
    
    // 仅对包含下级菜单的项执行切换逻辑
    const hasSubMenu = item.querySelector('.second') || item.querySelector('.third');
    if (!hasSubMenu) return;
    
    // 简化类切换操作
    item.classList.toggle('is-open');
  })
})

2. 修正CSS选择器

调整层级选择器，确保子菜单展开/收起样式正确触发：

/* 统一二级、三级菜单的初始隐藏状态 */
.second,
.third {
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 0;
  transform: scaleY(0);
  transform-origin: top;
}

/* 一级菜单展开时，显示二级菜单 */
.first .navigation-offcanvas-list-item.is-open .second {
  max-height: none;
  transform: scaleY(1);
}

/* 二级菜单展开时，显示三级菜单 */
.second .navigation-offcanvas-list-item.is-open .third {
  max-height: none;
  transform: scaleY(1);
}

说明 #

• 阻止事件冒泡后，点击二级菜单不会影响一级菜单状态，解决了菜单异常折叠的问题。
• 新增的hasSubMenu判断，避免点击最终链接时误触发菜单切换。
• CSS统一了子菜单的初始样式，修正选择器层级后，展开逻辑仅作用于对应层级的子菜单容器。

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