如何用onclick函数实现侧边栏子菜单的点击显示与隐藏

我帮你搞定这个点击切换子菜单的需求，结合你的HTML结构，给你一套完整的可落地方案：

1. 优化HTML结构 #

先给包含子菜单的<li>加个专属类名（比如has-submenu），方便后续精准控制：

<nav class="navigation">
  <ul class="mainmenu">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li class="has-submenu">
      <a href="">Products</a>
      <ul class="submenu">
        <li><a href="">Tops</a></li>
        <li><a href="">Bottoms</a></li> <!-- 补全了你未闭合的标签 -->
      </ul>
    </li>
  </ul>
</nav>

2. 修改CSS样式 #

移除原来的:hover触发逻辑，改用active类来控制子菜单的显示/隐藏：

/* 默认隐藏子菜单 */
.submenu {
  display: none;
  list-style: none;
  padding-left: 1rem; /* 可选：给子菜单加缩进，层级更清晰 */
}

/* 父元素有active类时，显示子菜单 */
.has-submenu.active .submenu {
  display: block;
}

/* 可选：给带二级菜单的项加个小箭头，提示用户可点击 */
.has-submenu > a::after {
  content: " ▾";
  font-size: 0.8rem;
  margin-left: 0.3rem;
}

.has-submenu.active > a::after {
  content: " ▴";
}

3. 添加JavaScript交互逻辑 #

绑定点击事件，实现点击切换active类，同时阻止空链接的默认跳转：

// 获取所有带子菜单的菜单项
const submenuTriggers = document.querySelectorAll('.has-submenu');

submenuTriggers.forEach(trigger => {
  const link = trigger.querySelector('a');
  link.addEventListener('click', (e) => {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    // 切换当前项的active类，实现显示/隐藏子菜单
    trigger.classList.toggle('active');
    
    // 可选：点击其他菜单项时，自动关闭已打开的子菜单
    submenuTriggers.forEach(other => {
      if (other !== trigger) {
        other.classList.remove('active');
      }
    });
  });
});

额外说明： #

• 点击Products链接时，父级<li>的active类会切换，CSS通过这个类控制子菜单的显示状态；
• 箭头图标是可选增强，能给用户更直观的交互反馈；
• 关闭其他子菜单的逻辑可以避免页面同时展开多个子菜单，提升侧边栏的整洁度。

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