使用 HTML 的 和 元素可实现原生、语义化、无障碍的可折叠树形导航，无需 JavaScript；嵌套使用合法但建议控制层级，配合 CSS 处理缩进、断行与响应式布局。
怎么用 HTML + CSS 实现可折叠的分类树形导航
纯 HTML 无法“记住”展开/收起状态，必须配合 details 和 summary 元素，这是目前最轻量、无需 JS 就能工作的方案。浏览器原生支持，语义正确，还能被屏幕阅读器识别。
常见错误是硬套 div + onclick 模拟，结果键盘不可操作、SEO 不友好、移动端点不灵——这些都不是“写错了”，而是绕开了浏览器本就提供的能力。
-
details默认折叠，加open属性可默认展开 -
summary必须是details的第一个子元素，否则失效 - 嵌套
details是合法的，但超过 3 层后视觉易混乱，建议用 CSS 控制缩进而非靠嵌套深度 - 不要给
summary加display: block或浮动，会破坏原生箭头图标和点击热区
<details><summary>前端</summary><details><summary>HTML</summary><p><a href="/html/semantics">语义化标签</a></p> </details></details>
为什么不用 JavaScript 手动控制展开逻辑
除非你明确需要：持久化用户偏好（比如 localStorage 记住哪几项开着）、联动搜索高亮、或兼容 IE11——否则没必要。现代浏览器对 details 支持已全覆盖（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+），连 iOS Safari 都没问题。
手写 JS 容易踩的坑：toggle() 调用时机不对导致状态错乱；没处理键盘 Enter/Space 触发；没监听 toggle 事件做副作用（比如懒加载子项）；或者更糟——把整个目录树当字符串拼接进 innerHTML，一刷新就丢状态。
- 如果真要 JS 增强，只监听
toggle事件，别重写展开逻辑 - 需要保存状态？用
sessionStorage存节点 ID，比 localStorage 更轻量且关页即清 - IE11 用户占比低于 0.3%（2024 年统计数据），优先保障主流体验
如何让树形目录在小屏上不撑破容器
默认情况下，嵌套的 details 会逐层缩进，文字长了就换行错位，甚至横向滚动。这不是 HTML 的问题，是 CSS 没管好空白和宽度。
关键不是“隐藏溢出”，而是让文本自然断行 + 控制层级视觉权重。别用 white-space: nowrap，那会让链接截断在中间。
- 给
details设margin-left: 1rem替代padding-left，避免内边距影响点击区域 - 对
summary使用word-break: break-word，防长英文/路径名撑开 - 用
max-width: 100%包裹整个目录，而不是给details设固定宽 - 移动端可加
@media (max-width: 480px)把缩进减到0.5rem，避免文字挤成一团
静态站点生成时怎么批量生成这类目录结构
如果你用 Hugo、Jekyll 或 VuePress，别手动写 details 嵌套。它们都支持递归遍历文件目录或 front matter 数据，生成对应 HTML。核心是：数据结构决定 DOM 结构，不是反过来。
容易忽略的一点：生成器输出的 details 如果带多余空格或换行，在某些解析器里会导致 summary 后面多出文本节点，从而让原生箭头消失——看着像“不能点了”，其实是 DOM 结构脏了。
- Hugo 中用
{{ range .Pages.ByTitle }}+{{ if .IsSection }}判断层级 - Jekyll 可用
{% for item in site.data.nav %}读取_data/nav.yml - 输出时用
{% raw %}{{- }}去除模板空格（Hugo）或{%-（Jekyll），确保summary紧贴details开始 - 生成后用浏览器 DevTools 检查
details下是否只有summary和内容，没有#text节点
实际部署时最常被卡住的，是开发者把精力花在“怎么让 JS 动画更顺滑”上，却忘了检查 summary 标签有没有被 CSS 的 user-select: none 或 pointer-events: none 误伤——一点就失灵，排查半天才发现是这一行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
