仅用CSS实现点击展开的UL LI侧边子菜单下拉效果

第一步：修正并完善HTML结构 #

我们给有子分类的菜单项嵌套子列表，用一个带图标的触发元素来控制下拉：

<ul class="droplist">
  <li class="menu-item">
    <a href="#" class="toggle-btn">
      <i class="fa fa-angle-right"></i> FOOD ITEMS
    </a>
    <!-- 子分类列表 -->
    <ul class="submenu">
      <li><a href="#">Fruits</a></li>
      <li><a href="#">Vegetables</a></li>
      <li><a href="#">Snacks</a></li>
    </ul>
  </li>
  <li class="menu-item">
    <a href="#" class="toggle-btn">
      <i class="fa fa-angle-right"></i> TOYS
    </a>
    <ul class="submenu">
      <li><a href="#">Plush Toys</a></li>
      <li><a href="#">Action Figures</a></li>
    </ul>
  </li>
  <li>Category</li>
</ul>

第二步：用CSS控制显示/隐藏和样式 #

初始状态下隐藏子菜单，添加过渡动画让下拉更流畅，同时给激活状态的菜单添加样式：

/* 基础菜单样式 */
.droplist {
  list-style: none;
  padding: 0;
  width: 250px;
  background: #f5f5f5;
}

.menu-item {
  border-bottom: 1px solid #ddd;
}

.toggle-btn {
  display: block;
  padding: 12px 15px;
  text-decoration: none;
  color: #333;
  cursor: pointer;
  transition: background 0.3s;
}

.toggle-btn:hover {
  background: #e0e0e0;
}

/* 子菜单默认隐藏 */
.submenu {
  list-style: none;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  background: #fff;
}

.submenu li {
  padding: 8px 25px;
}

.submenu li a {
  color: #555;
  text-decoration: none;
}

/* 激活状态：显示子菜单 */
.menu-item.active .submenu {
  max-height: 200px; /* 根据子项数量调整高度 */
}

/* 切换箭头方向 */
.menu-item.active .fa-angle-right {
  transform: rotate(90deg);
  transition: transform 0.3s;
}

第三步：用JavaScript实现点击切换逻辑 #

监听触发按钮的点击事件，给父菜单添加/移除active类来控制子菜单的显示：

// 获取所有切换按钮
const toggleBtns = document.querySelectorAll('.toggle-btn');

toggleBtns.forEach(btn => {
  btn.addEventListener('click', function(e) {
    e.preventDefault(); // 阻止默认跳转行为
    // 切换当前菜单的active类
    const parentItem = this.closest('.menu-item');
    parentItem.classList.toggle('active');
    
    // 可选：关闭其他打开的子菜单，保持一次只展开一个
    toggleBtns.forEach(otherBtn => {
      const otherItem = otherBtn.closest('.menu-item');
      if (otherItem !== parentItem) {
        otherItem.classList.remove('active');
      }
    });
  });
});

这样就实现了点击菜单项时，子分类平滑下拉/收起的效果，同时修正了HTML结构的语义问题，让菜单更符合规范。

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