如何用Radio输入框实现主分类切换时的子分类显示（支持动画）

完全能满足你选中主分类时切换对应子分类的需求，而且相比select+optgroup，这种方案更容易实现自定义动画效果。我来给你梳理下具体的实现思路和代码示例：

核心逻辑 #

利用radio输入框的单选特性（同一name组只能选中一个），通过监听radio的点击/change事件，根据选中的值来控制对应子分类div的显示/隐藏，再配合CSS就能轻松加上动画效果。

完整代码示例 #

HTML结构（关联主分类与子分类）

<div class="cat-dropdown">
  <!-- 主分类Radio组 -->
  <div class="title">
    <label class="category-label">
      <input type="radio" name="main-category" value="electronics" checked>
      电子产品
    </label>
    <label class="category-label">
      <input type="radio" name="main-category" value="clothing">
      服饰鞋帽
    </label>
    <label class="category-label">
      <input type="radio" name="main-category" value="home">
      家居用品
    </label>
  </div>

  <!-- 子分类容器 -->
  <div class="sub-category-container">
    <div class="sub-category" data-match="electronics">
      <h4>电子产品子分类</h4>
      <ul>
        <li>手机</li>
        <li>电脑</li>
        <li>耳机</li>
      </ul>
    </div>
    <div class="sub-category" data-match="clothing">
      <h4>服饰鞋帽子分类</h4>
      <ul>
        <li>T恤</li>
        <li>裤子</li>
        <li>运动鞋</li>
      </ul>
    </div>
    <div class="sub-category" data-match="home">
      <h4>家居用品子分类</h4>
      <ul>
        <li>沙发</li>
        <li>床品</li>
        <li>厨具</li>
      </ul>
    </div>
  </div>
</div>

CSS样式（含动画效果）

/* 初始隐藏所有子分类 */
.sub-category {
  display: none;
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  margin-top: 10px;
  padding: 0 15px;
  border-top: 1px solid #eee;
}

/* 选中时显示子分类并添加动画 */
.sub-category.active {
  display: block;
  opacity: 1;
  height: auto;
  padding: 15px;
}

/* 可选：美化Radio按钮 */
.category-label {
  margin-right: 20px;
  cursor: pointer;
}

jQuery逻辑（完善你的代码片段）

$(document).ready(function() {
  // 页面加载时，显示默认选中的子分类
  showActiveSubCategory();

  // 监听Radio点击事件，切换子分类
  $(".cat-dropdown .title :input").on("change", function() {
    showActiveSubCategory();
  });

  // 封装切换逻辑
  function showActiveSubCategory() {
    // 获取当前选中的主分类值
    const selectedValue = $(".cat-dropdown .title :input:checked").val();
    
    // 隐藏所有子分类，再显示匹配的那一个
    $(".sub-category").removeClass("active");
    $(".sub-category[data-match='" + selectedValue + "']").addClass("active");
  }
});

关键注意点 #

• Radio按钮必须设置相同的name属性，确保同一组只能单选
• 用data-match（或自定义属性）关联主分类值和子分类容器，方便匹配
• CSS中的transition属性可以自定义动画效果（比如淡入淡出、高度变化），完全满足你的动画需求
• 如果需要更复杂的交互（比如点击外部关闭菜单），可以额外添加事件监听

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