如何将悬停展开式菜单改为点击触发（展开/收起）？

你需要将原有的鼠标悬停展开导航菜单，修改为点击主菜单切换子菜单的展开/收起状态，以下提供两种实现方案：

方案一：纯HTML + CSS实现（无需JavaScript） #

利用原生复选框的checked状态结合CSS选择器实现交互，无需额外脚本。

修改后的HTML代码 #

<nav class="navigation">
  <ul class="mainmenu">
    <li>
      <input type="checkbox" id="menu1" class="menu-toggle">
      <label for="menu1">Products</label>
      <ul class="submenu">
        <li><a href="">Tops</a></li>
        <li><a href="">Bottoms</a></li>
        <li><a href="">Footwear</a></li>
      </ul>
    </li>
    <li>
      <input type="checkbox" id="menu2" class="menu-toggle">
      <label for="menu2">Other</label>
      <ul class="submenu">
        <li><a href="">Contact us</a></li>
        <li><a href="">About us</a></li>
        <li><a href="">FAQ</a></li>
      </ul>
    </li>
  </ul>
</nav>

修改后的CSS代码 #

html, body {
    font-family: Arial, Helvetica, sans-serif;
}

.navigation {
  width: 300px;
}

.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 隐藏原生复选框 */
.menu-toggle {
  display: none;
}

.mainmenu label {
  display: block;
  background-color: #CCC;
  text-decoration: none;
  padding: 10px;
  color: #000;
  cursor: pointer; /* 提示元素可点击 */
}

.mainmenu label:hover {
    background-color: #C5C5C5;
}

/* 复选框选中时，展开对应子菜单 */
.menu-toggle:checked ~ .submenu {
  max-height: 200px;
}

.submenu a {
  display: block;
  background-color: #999;
  text-decoration: none;
  padding: 10px;
  color: #000;
}

.submenu a:hover {
  background-color: #666;
}

.submenu {
  overflow: hidden;
  max-height: 0;
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
}

原理说明：将原主菜单的<a>标签替换为<label>，绑定隐藏的复选框。点击<label>会触发复选框状态切换，CSS通过:checked选择器控制子菜单的max-height属性，实现平滑的展开/收起过渡。

方案二：JavaScript实现（保留原有HTML结构） #

如果不想修改原有HTML结构，可通过JavaScript监听点击事件，切换子菜单的显示状态。

调整后的HTML（保留原结构） #

<nav class="navigation">
  <ul class="mainmenu">
    <li><a href="#" class="menu-link">Products</a>
      <ul class="submenu">
        <li><a href="">Tops</a></li>
        <li><a href="">Bottoms</a></li>
        <li><a href="">Footwear</a></li>
      </ul>
    </li>
    <li><a href="#" class="menu-link">Other</a>
      <ul class="submenu">
        <li><a href="">Contact us</a></li>
        <li><a href="">About us</a></li>
        <li><a href="">FAQ</a></li>
      </ul>
    </li>
  </ul>
</nav>

调整后的CSS（新增.active类） #

html, body {
    font-family: Arial, Helvetica, sans-serif;
}

.navigation {
  width: 300px;
}

.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mainmenu a {
  display: block;
  background-color: #CCC;
  text-decoration: none;
  padding: 10px;
  color: #000;
}

.mainmenu a:hover {
    background-color: #C5C5C5;
}

/* 通过.active类控制子菜单展开 */
.mainmenu li.active .submenu {
  max-height: 200px;
}

.submenu a {
  background-color: #999;
}

.submenu a:hover {
  background-color: #666;
}

.submenu {
  overflow: hidden;
  max-height: 0;
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
}

JavaScript代码 #

// 获取所有主菜单链接
const menuLinks = document.querySelectorAll('.menu-link');

menuLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止链接默认跳转行为
    // 切换父元素<li>的.active类
    const parentLi = this.parentElement;
    parentLi.classList.toggle('active');
  });
});

原理说明：给主菜单链接添加点击事件监听，点击时切换其父元素<li>的.active类，CSS通过该类控制子菜单的max-height，实现展开/收起的切换效果。

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