如何在二级子菜单下添加三级子菜单？解决默认展开问题

我用创建二级子菜单的逻辑添加了三级子菜单，菜单能正常显示，但打开二级菜单时，三级子菜单会默认展开，不符合预期效果。相关代码如下：

<ul class="nav-links">
  <li>
    <div class="iocn-link">
      <a href="#">
        <i class='bx bx-collection'></i>
        <span class="link_name">患者信息模块</span>
      </a>
      <i class='bx bxs-chevron-down arrow'></i>
    </div>
    <ul class="sub-menu">
      <li><a class="link_name" href="#">患者信息</a></li>
      <li><a href="#">患者</a></li>
      <li><a href="#">牙科</a></li>
      <li><a href="#">疫苗接种</a></li>
      <li><a href="#">儿科</a></li>
      <li>
        <div class="iocn-link">
          <a href="#">
            <i class='bx bx-collection'></i>
            <span class="link_name">儿科</span>
          </a>
          <i class='bx bxs-chevron-down arrow'></i>
        </div>
        <ul class="sub-menu">
          <li><a class="link_name" href="#">疫苗接种</a></li>
          <li><a href="#">驱虫</a></li>
          <li><a href="#">维生素/补充剂</a></li>
        </ul>
      </li>
      <li><a href="#">肺结核定点治疗</a></li>
      <li><a href="#">产科</a></li>
    </ul>
  </li>
</ul>

效果如图：

解决方法 #

问题出在三级子菜单没有设置初始隐藏状态，默认继承了二级菜单的显示逻辑。只需通过CSS和JS分别控制默认状态与交互即可：

1. CSS设置初始隐藏
   给所有sub-menu添加默认隐藏样式，确保未激活时不显示：

.sub-menu {
  display: none;
  /* 保留原有样式如内边距、字体等 */
}

/* 父级li激活时显示子菜单 */
li.active .sub-menu {
  display: block;
}

2. JS控制独立展开/收起
   给每个菜单头部绑定点击事件，切换对应父级的激活状态，同时阻止三级菜单的事件冒泡，避免影响二级菜单：

const menuHeads = document.querySelectorAll('.iocn-link');

menuHeads.forEach(head => {
  head.addEventListener('click', function(e) {
    e.preventDefault();
    const parentLi = this.closest('li');
    parentLi.classList.toggle('active');
    
    // 三级菜单点击时阻止事件向上传递
    if (parentLi.closest('.sub-menu')) {
      e.stopPropagation();
    }
  });
});

设置完成后，二级菜单打开时三级菜单默认隐藏，只有点击三级菜单的箭头才会展开。

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