实现点击主分类动态展示子分类的交互式导航菜单-js教程-PHP中文网

本文介绍如何使用 html、bootstrap、javascript 和 jquery 构建一个两级分类导航系统：点击顶部主分类（如“korean cars”）显示其下属父卡片，再点击任一父卡片即可展开对应的子卡片列表。

本文介绍如何使用 html、bootstrap、javascript 和 jquery 构建一个两级分类导航系统：点击顶部主分类（如“korean cars”）显示其下属父卡片，再点击任一父卡片即可展开对应的子卡片列表。

要实现“点击主分类 → 显示父卡片 → 点击父卡片 → 展开子卡片”的层级导航效果，关键在于结构化数据组织与动态 DOM 控制。下面提供一套完整、可运行的解决方案，基于 Bootstrap 5（兼容性好）和轻量级 jQuery 操作。

百度AI开放平台

百度AI开放平台是一款提供语音、图像、自然语言处理和行业 AI 能力的技术开放平台。

下载

✅ 基础 HTML 结构（语义清晰、便于 JS 控制）

<!-- 主分类导航栏 -->
<nav class="navbar navbar-expand-lg bg-light"><div class="container-fluid">
    <ul class="navbar-nav">
<li class="nav-item">
        <a href="#" class="nav-link main-category" data-category="korean">Korean Cars</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link main-category" data-category="german">German Cars</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link main-category" data-category="japanese">Japanese Cars</a>
      </li>
    </ul>
</div>
</nav><!-- 父卡片容器（默认隐藏） --><div id="parent-cards" class="container mt-4 d-none">
  <h3 id="category-title"></h3>
  <div class="row" id="parent-grid"></div>
</div>

<!-- 子卡片容器（动态插入） -->
<div id="child-cards" class="container mt-4 d-none">
  <h4 id="parent-title"></h4>
  <div class="row" id="child-grid"></div>
</div>

✅ 示例数据（模拟分类关系）

const categoryData = {
  korean: {
    title: "Korean Cars",
    parents: [
      {
        id: "hyundai",
        name: "Hyundai",
        children: ["Sonata", "Elantra", "Tucson", "Santa Fe"]
      },
      {
        id: "kia",
        name: "KIA",
        children: ["Optima", "Sorento", "Sportage", "Telluride"]
      }
    ]
  },
  german: {
    title: "German Cars",
    parents: [
      { id: "bmw", name: "BMW", children: ["X3", "3 Series", "5 Series"] },
      { id: "audi", name: "Audi", children: ["Q5", "A4", "A6"] }
    ]
  }
};

✅ 核心交互逻辑（jQuery 实现）

$(document).ready(function () {
  // 1️⃣ 点击主分类：显示对应父卡片
  $(".main-category").on("click", function (e) {
    e.preventDefault();
    const catKey = $(this).data("category");
    const cat = categoryData[catKey];

    if (!cat) return;

    // 更新标题 & 渲nder 父卡片
    $("#category-title").text(cat.title);
    $("#parent-grid").empty();

    cat.parents.forEach(parent => {
      const parentCard = `
        <div class="col-md-4 mb-3">
          <div class="card parent-card" data-parent-id="${parent.id}">
            <div class="card-body text-center">
              <h5 class="card-title">${parent.name}</h5>
              <p class="text-muted">Click to view models</p>
            </div>
          </div>
        </div>
      `;
      $("#parent-grid").append(parentCard);
    });

    // 显示父卡片区，隐藏子卡片区
    $("#parent-cards").removeClass("d-none");
    $("#child-cards").addClass("d-none");
  });

  // 2️⃣ 点击父卡片：显示其子卡片
  $(document).on("click", ".parent-card", function () {
    const parentId = $(this).data("parent-id");
    const catKey = $(".main-category.active").data("category") || "korean";
    const cat = categoryData[catKey];
    const parent = cat.parents.find(p => p.id === parentId);

    if (!parent) return;

    // 更新子标题 & 渲染子卡片
    $("#parent-title").text(parent.name);
    $("#child-grid").empty();

    parent.children.forEach(model => {
      const childCard = `
        <div class="col-md-3 mb-2">
          <div class="card h-100">
            <div class="card-body text-center">
              <h6 class="card-title mb-0">${model}</h6>
            </div>
          </div>
        </div>
      `;
      $("#child-grid").append(childCard);
    });

    // 切换视图
    $("#child-cards").removeClass("d-none");
    $("#parent-cards").addClass("d-none");
  });
});