核心逻辑是用data-tab和dataset构建可嵌套映射：一级按钮设data-group，二级按钮设data-parent与data-tab，面板用id="panel-{group}-{tab}"对应；JS控制显隐、状态同步及ARIA属性更新，确保键盘导航与屏幕阅读器支持。
用 data-tab + dataset 实现目录级联切换的核心逻辑
目录级联切换不是“多层下拉菜单”，而是指一级标签（如「前端」）点击后，二级标签（如「HTML」「CSS」「JS」）动态显示并可独立切换内容——本质仍是显隐控制，但需两层状态同步。关键在于避免硬编码层级关系，用 data-tab 和 dataset 构建可嵌套映射。
常见错误是把二级面板写死在 HTML 里，导致无法按需加载或复用；或者用 class 名拼接（如 tab-frontend-html）强行耦合层级，后期改名就全崩。
- 一级按钮设
data-group="frontend"，表示所属目录组 - 二级按钮设
data-parent="frontend" data-tab="html"，既声明归属，又定义自身 ID - 对应面板用
id="panel-frontend-html"，保持命名可预测但不强制依赖 JS 拼接 - JS 初始化时只显示一级默认项，二级面板初始
hidden或display: none，不渲染内容
如何让二级标签随一级选择动态显示/隐藏
不能靠 CSS 的 :has()（兼容性差且无法触发重排），得用 JS 控制二级容器的显隐。重点不是“怎么切”，而是“什么时候切”——一级切换后，才暴露对应的二级标签组，同时重置二级选中态。
- 监听一级按钮 click，先移除所有二级容器的
active类，再给匹配data-parent的容器加active - 二级容器内所有按钮初始
disabled，激活后才移除 disabled 并聚焦第一个可操作项 - 二级切换前，检查当前是否有激活的一级项；没有则忽略点击，防止空状态报错
- 用
document.querySelectorAll('[data-parent="frontend"]')比遍历所有再比对更直接，也避免 DOM 顺序依赖
为什么 display: none 比 hidden 属性更适合目录级联
hidden 属性语义清晰，但对级联场景有硬伤：它不可继承，且无法用 CSS 选择器批量控制子元素。比如你隐藏了二级容器，它的子按钮仍可能被键盘焦点捕获，破坏可访问性。
立即学习“前端免费学习笔记（深入）”；
-
display: none彻底移出渲染流，二级内容不参与布局、不占空间、不触发重排，性能更稳 - 配合 CSS 类（如
.subtabs-active）控制显隐，比反复操作element.hidden = true更易维护动画和响应式 - 若需保留占位（比如防止页面跳动），可用
visibility: hidden+pointer-events: none组合，但要额外处理焦点管理 - 注意：
display: none下的表单控件不会提交数据，如果二级含搜索框等交互元素，需确保仅在可见时启用
容易被忽略的键盘与屏幕阅读器支持点
目录级联一旦支持键盘导航，就不再是“能用”，而是“可用”。很多实现漏掉这步，结果用户按 Tab 键卡死在一级按钮，进不去二级。
- 一级按钮加
role="tablist"，每个按钮加role="tab"和aria-controls="subtabs-frontend" - 二级容器加
role="tabpanel"和对应id="subtabs-frontend"，初始aria-hidden="true" - 一级切换后，用
element.setAttribute('aria-hidden', 'false')同步状态，不能只靠 CSS 显隐 - 按 ← → 切换一级，按 ↓ 进入当前一级对应的二级容器，Tab 键在二级内移动——这些逻辑必须手写，无自动方案
最复杂的不是 DOM 操作，而是状态同步粒度：一级选中、二级容器可见、二级某项激活、焦点位置、ARIA 属性更新，五者必须严格一致，差一个就会导致屏幕阅读器读错或键盘失焦。
