使用JavaScript实现点击主菜单默认展开二级及三级子菜单项的方法

以下是可直接复用的实现代码，匹配你需要的点击主菜单同时展开二三级子菜单的效果：

1. 嵌套菜单HTML结构 #

<ul class="menu-container">
  <!-- 主菜单项1 -->
  <li class="primary-menu">
    <div class="primary-title">系统管理</div>
    <!-- 二级菜单 -->
    <ul class="secondary-menu">
      <li class="secondary-item">
        <span>用户管理</span>
        <!-- 三级菜单 -->
        <ul class="tertiary-menu">
          <li>用户列表</li>
          <li>角色配置</li>
        </ul>
      </li>
      <li class="secondary-item">
        <span>权限管理</span>
        <ul class="tertiary-menu">
          <li>权限分配</li>
          <li>操作日志</li>
        </ul>
      </li>
    </ul>
  </li>
  <!-- 主菜单项2 -->
  <li class="primary-menu">
    <div class="primary-title">业务中心</div>
    <ul class="secondary-menu">
      <li class="secondary-item">
        <span>订单管理</span>
        <ul class="tertiary-menu">
          <li>订单列表</li>
          <li>订单导出</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

2. 基础样式CSS #

通过active类控制子菜单的显示隐藏，默认收起所有子菜单：

ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.primary-title {
  padding: 12px 16px;
  background: #f5f5f5;
  cursor: pointer;
  font-weight: 500;
}
/* 默认隐藏二三级菜单 */
.secondary-menu, .tertiary-menu {
  display: none;
  padding-left: 20px;
}
.secondary-item {
  padding: 8px 16px;
  cursor: pointer;
  background: #fafafa;
}
.tertiary-menu li {
  padding: 6px 16px;
  background: #fff;
  cursor: pointer;
}
/* 激活状态显示子菜单 */
.primary-menu.active .secondary-menu,
.secondary-item.active .tertiary-menu {
  display: block;
}

3. 交互逻辑JavaScript代码 #

// 获取所有主菜单项
const primaryMenus = document.querySelectorAll('.primary-menu')

// 绑定主菜单点击事件
primaryMenus.forEach(menu => {
  const title = menu.querySelector('.primary-title')
  title.addEventListener('click', () => {
    // 切换当前主菜单展开/收起状态
    menu.classList.toggle('active')
    // 展开主菜单时自动展开所有二级、三级菜单
    if (menu.classList.contains('active')) {
      const secondaryItems = menu.querySelectorAll('.secondary-item')
      secondaryItems.forEach(item => item.classList.add('active'))
    }
  })
})

// 可选：页面加载后默认展开第一个主菜单及其下所有子菜单
window.addEventListener('DOMContentLoaded', () => {
  if (primaryMenus.length) {
    primaryMenus[0].classList.add('active')
    const firstMenuSecondaryItems = primaryMenus[0].querySelectorAll('.secondary-item')
    firstMenuSecondaryItems.forEach(item => item.classList.add('active'))
  }
})

如果你需要支持点击二级菜单单独控制对应三级菜单的展开收起，只需要给二级菜单项也绑定类似的点击切换active类的逻辑即可。

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