本文介绍如何使用 html、bootstrap、javascript 和 jquery 构建层级式分类导航：点击顶部主分类显示对应父卡片，再点击父卡片展开其子分类卡片，支持平滑切换与状态管理。
本文介绍如何使用 html、bootstrap、javascript 和 jquery 构建层级式分类导航：点击顶部主分类显示对应父卡片，再点击父卡片展开其子分类卡片，支持平滑切换与状态管理。
在电商、内容聚合或产品目录类网站中，常见的“主分类 → 父卡片 → 子分类”三级导航结构，需要兼顾用户体验与代码可维护性。下面我们将基于 Bootstrap 5（兼容响应式）与轻量级 jQuery 实现一个清晰、可扩展的解决方案。
✅ 核心思路
- 层级分离：主分类（如 “Korean Cars”、“German Cars”）作为一级导航项；
- 按需渲染：点击主分类时，仅显示该分类下的所有父卡片（即一级子项）；
- 递进展开：点击任一父卡片后，隐藏其他父卡片，动态显示其专属子分类卡片（二级子项）；
- 状态控制：避免 DOM 冗余操作，通过 data-* 属性标记归属关系，并利用 CSS 类（如 .active, .d-none）控制显隐。
? HTML 结构示例
<!-- 主分类导航栏 -->
<nav class="navbar bg-light mb-4"><div class="container-fluid">
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#" class="nav-link" data-category="korean">Korean Cars</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" data-category="german">German Cars</a>
</li>
</ul>
</div>
</nav><!-- 父卡片容器（主分类区域） --><div id="parent-cards" class="row g-3"></div>
<!-- 子卡片容器（折叠式） -->
<div id="child-cards" class="row g-3 mt-4 d-none"></div>
? JavaScript + jQuery 实现逻辑
$(document).ready(function () {
// 模拟分类数据（实际项目中可从 API 加载）
const categories = {
korean: {
parents: [
{ id: 'hyundai', title: 'Hyundai', children: ['Elantra', 'Sonata', 'Tucson'] },
{ id: 'kia', title: 'Kia', children: ['Seltos', 'Sportage', 'Telluride'] }
]
},
german: {
parents: [
{ id: 'bmw', title: 'BMW', children: ['X3', 'X5', '3 Series'] },
{ id: 'audi', title: 'Audi', children: ['Q5', 'A4', 'TT'] }
]
}
};
// 点击主分类：加载对应父卡片
$('.nav-link[data-category]').on('click', function (e) {
e.preventDefault();
const catKey = $(this).data('category');
const parents = categories[catKey]?.parents || [];
$('#parent-cards').empty();
$('#child-cards').addClass('d-none');
parents.forEach(parent => {
const $card = $(`
<div class="col-md-4">
<div class="card h-100" data-parent-id="${parent.id}">
<div class="card-body text-center">
<h5 class="card-title">${parent.title}</h5>
<p class="text-muted">Click to view models</p>
</div>
</div>
</div>
`);
$('#parent-cards').append($card);
});
});
// 点击父卡片：显示其子分类
$(document).on('click', '.card[data-parent-id]', function () {
const parentId = $(this).data('parentId');
const catKey = $('.nav-link.active').data('category') || 'korean';
const parentData = categories[catKey].parents.find(p => p.id === parentId);
if (!parentData) return;
$('#child-cards').removeClass('d-none').empty();
parentData.children.forEach(child => {
$('#child-cards').append(`
<div class="col-md-3">
<div class="card h-100">
<div class="card-body text-center">
<h6 class="card-title">${child}</h6>
<small class="text-muted">Model</small>
</div>
</div>
</div>
`);
});
});
});
⚠️ 注意事项与最佳实践
- 性能优化：避免重复绑定事件，使用事件委托（如 $(document).on('click', ...)）处理动态生成的卡片；
- 无障碍支持：为卡片添加 role="button" 与 tabindex="0"，并补充键盘交互（Enter/Space 触发）；
- 样式增强：可配合 Bootstrap 的 fade、show 类实现淡入动画，或用 slideUp()/slideDown() 替代 display 切换；
- SEO 友好：初始 HTML 应包含有意义的静态结构（如首屏默认分类），JS 仅用于增强交互；
- 扩展性设计：将 categories 数据源替换为 AJAX 请求（如 fetch('/api/categories')），便于后台驱动。
✅ 总结
该方案不依赖复杂框架，以语义化 HTML + Bootstrap 布局 + jQuery 事件驱动为核心，清晰分离关注点。通过 data-category 与 data-parent-id 维护层级上下文，既保证逻辑可读性，也便于后续接入 Vue/React 进行组件化重构。只需少量调整，即可适配任意 N 级分类场景。
