details + summary 是帮助中心首选，因其天然匹配“标题+答案”语义结构，浏览器自动管理展开状态，无需手动维护open属性，且兼容性好、无障碍友好。

标签是最快、最可靠的方案，90% 的帮助中心 FAQ 场景直接用它就能跑通，无需 JS、键盘可访问、屏幕阅读器友好。

为什么 details + summary 是帮助中心首选

帮助中心本质是“标题+答案”的静态结构，details 天然匹配这个语义：用户点击 summary 触发展开，浏览器自动管理状态，连 open 属性都不用手动维护。

• 常见错误现象：

  问题

  答案

  —— 没
  ，点击完全没反应
• 必须是
  的第一个子元素，否则 Safari/Firefox 可能不识别
• 默认收起，加 open 属性可默认展开：
  常见问题

  这里是答案

  

  HTML Text Extract

  从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

  下载
• Safari 对 summary::marker 支持不稳定，别只靠它改箭头；推荐用 summary::before + transform: rotate(90deg) 控制图标旋转

怎么让折叠有滑动动画（不是简单显隐）

原生 details 不支持高度过渡动画，要“滑出”效果，必须放弃它的内置逻辑，改用 max-height + JS 动态测量。

• CSS 过渡不支持 height: auto，所以不能写 transition: height 0.3s
• 安全做法：JS 点击时读取目标内容的 scrollHeight，设为 max-height；收起时设 max-height: 0 并配 overflow: hidden
• 收起后建议清空 max-height 行内样式（设为 ''），避免后续高度判断错乱
• 如果内容高度差异大（比如从 20px 到 500px），固定写死 max-height: 500px 会导致小内容“弹跳”，务必动态读取

多级 FAQ 或嵌套菜单能不能用 details

可以嵌套，但部分浏览器（尤其是 Safari）对嵌套

支持差，点击子项可能意外触发父级收起。

• 不推荐直接嵌套多个
  实现二级菜单
• 更稳妥的做法：外层用
  ，内部子项改用 + data-target + JS 控制，用 classList.toggle() 切换 active 类
• 监听 click 时记得加 event.stopPropagation()，避免点击子链接意外触发父级折叠
• 如果侧边栏有多个可折叠项，别给所有 绑同一个函数再手动查 event.target，改用事件委托更轻量

纯 CSS 方案（禁用 JS 时怎么兜底）

当环境禁止 JS（如某些 CMS 导出页、微信公众号 HTML），可用 input[type="checkbox"] + :checked 伪类模拟。

• 结构顺序不能错： → 问题 →
  答案
• CSS 靠 input:checked + label + .answer 选择器控制显隐
• 动画只能靠 max-height 过渡，值需预估上限（比如最多 6 行 × 行高 ≈ 180px），设 max-height: 180px
• 无法响应内容高度变化（比如 JS 后续插入新段落），适合纯静态 FAQ

真正难的不是实现折叠，而是内容高度不确定时如何让动画既平滑又不卡顿——这需要 JS 动态读取 scrollHeight，而不是靠猜一个固定值。很多项目卡在这里，最后退回到无动画的原生方案。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！