点击展开/收起子菜单的垂直菜单实现求助

一、CSS调整（解决滚动跳动） #

通过固定菜单位置避免滚动时移位，同时用类控制子菜单显隐，替代原hover规则：

/* 主菜单容器：固定在视口内，避免滚动跳动 */
.vertical-menu {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto; /* 菜单过长时内部滚动，不干扰页面滚动 */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 子菜单默认隐藏 */
.submenu {
  display: none;
  padding-left: 15px;
  list-style: none;
}

/* 激活状态下显示子菜单 */
.submenu.active {
  display: block;
}

/* 父菜单项样式：扩大点击区域，提升交互感 */
.menu-item.has-submenu {
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
}

二、JavaScript实现点击切换逻辑 #

给带亚菜单的父菜单项绑定点击事件，切换子菜单的激活状态，可选关闭其他展开的子菜单：

// 获取所有包含子菜单的父菜单项
const parentMenuItems = document.querySelectorAll('.menu-item.has-submenu');

parentMenuItems.forEach(item => {
  item.addEventListener('click', function() {
    // 切换当前子菜单的显隐
    const submenu = this.querySelector('.submenu');
    submenu.classList.toggle('active');

    // 可选：点击其他父菜单项时，关闭已展开的子菜单
    parentMenuItems.forEach(otherItem => {
      if (otherItem !== this) {
        const otherSubmenu = otherItem.querySelector('.submenu');
        otherSubmenu.classList.remove('active');
      }
    });
  });
});

三、适配的HTML结构 #

确保菜单层级清晰，方便JS和CSS定位：

<ul class="vertical-menu">
  <li class="menu-item has-submenu">
    主菜单1
    <ul class="submenu">
      <li class="submenu-item">子菜单1-1</li>
      <li class="submenu-item">子菜单1-2</li>
    </ul>
  </li>
  <li class="menu-item has-submenu">
    主菜单2
    <ul class="submenu">
      <li class="submenu-item">子菜单2-1</li>
    </ul>
  </li>
  <li class="menu-item">无亚菜单项</li>
</ul>

核心优势 #

• sticky定位彻底解决滚动时的菜单跳动问题，菜单始终固定在视口内；
• 用类控制显隐比直接操作style.display更易维护，支持后续样式扩展；
• 点击区域覆盖整个父菜单项，交互体验更流畅。

内容的提问来源于stack exchange，提问作者Wayne G. Dunn