如何将分类与子分类列表改造为点击展开的嵌套Dropdown Menu

当然能做到！这种点击展开/收起的嵌套分类菜单是非常实用的交互设计，我给你一套原生前端的实现方案，不需要依赖任何框架，直接就能用：

实现方案 #

1. HTML结构

先搭好分类的嵌套结构，把父分类和对应的子分类绑定在一起：

<div class="category-container">
  <!-- 父分类1 -->
  <div class="category-parent">
    <span class="category-title">电子产品</span>
    <span class="toggle-icon">▼</span>
    <div class="category-children">
      <div class="child-category">手机</div>
      <div class="child-category">笔记本电脑</div>
      <div class="child-category">耳机</div>
    </div>
  </div>

  <!-- 父分类2 -->
  <div class="category-parent">
    <span class="category-title">服装</span>
    <span class="toggle-icon">▼</span>
    <div class="category-children">
      <div class="child-category">男装</div>
      <div class="child-category">女装</div>
      <div class="child-category">童装</div>
    </div>
  </div>

  <!-- 支持多级嵌套示例 -->
  <div class="category-parent">
    <span class="category-title">家居用品</span>
    <span class="toggle-icon">▼</span>
    <div class="category-children">
      <div class="child-category">厨房用具</div>
      <div class="category-parent">
        <span class="category-title">卧室用品</span>
        <span class="toggle-icon">▼</span>
        <div class="category-children">
          <div class="child-category">床垫</div>
          <div class="child-category">枕头</div>
        </div>
      </div>
    </div>
  </div>
</div>

2. CSS样式

负责控制菜单的显示状态和视觉样式，默认隐藏子分类，通过类名切换展开/收起：

/* 基础容器样式 */
.category-container {
  max-width: 350px;
  margin: 20px;
  font-family: Arial, sans-serif;
}

/* 父分类样式 */
.category-parent {
  padding: 10px 12px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  margin-bottom: 6px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
}

.category-parent:hover {
  background-color: #eee;
}

/* 子分类容器：默认隐藏 */
.category-children {
  display: none;
  margin-top: 8px;
  padding-left: 20px;
}

/* 展开状态下显示子分类 */
.category-parent.expanded .category-children {
  display: block;
}

/* 切换箭头的动画效果 */
.toggle-icon {
  transition: transform 0.2s ease;
  font-size: 14px;
}

.category-parent.expanded .toggle-icon {
  transform: rotate(-180deg);
}

/* 子分类项样式 */
.child-category {
  padding: 7px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.child-category:hover {
  color: #2563eb;
}

3. JavaScript交互

监听父分类的点击事件，切换展开/收起的状态类：

// 获取所有父分类元素
const parentCategories = document.querySelectorAll('.category-parent');

// 给每个父分类绑定点击事件
parentCategories.forEach(parent => {
  parent.addEventListener('click', () => {
    // 切换展开状态类
    parent.classList.toggle('expanded');
  });
});

// 如果分类数量特别多，推荐用事件委托优化性能
// document.querySelector('.category-container').addEventListener('click', (e) => {
//   const parent = e.target.closest('.category-parent');
//   if (parent) parent.classList.toggle('expanded');
// });

关键说明 #

• 这套方案支持多级嵌套，只需要按照父分类的结构在子分类里继续嵌套即可，CSS和JS逻辑完全兼容
• 用expanded类来控制状态，比直接操作DOM样式更语义化，也方便后续扩展样式
• 箭头的旋转动画提供了清晰的视觉反馈，提升用户体验

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