details 元素就是专为 faq 折叠设计的原生语义化方案，无需 js、seo 友好；summary 必须嵌套于 details 内且为第一子元素，否则无交互；支持 open 属性默认展开、css 自定义图标，但无原生动画且多状态联动需 js。
details 元素就是标准答案，不用 JS 也能做 FAQ 折叠
HTML 原生 details + summary 就是专为 FAQ 折叠设计的语义化方案，浏览器原生支持，无需加载 JS、不依赖框架、SEO 友好。它不是“能用”，而是“该用”——只要你的 FAQ 不需要动画过渡或复杂状态联动，details 就是最轻量、最可靠的选择。
为什么 summary 点击没反应？检查是否漏了 details 包裹
常见错误是只写 summary，忘了它必须嵌套在 details 内部。单独的 summary 没有交互行为，浏览器会当普通文本渲染。
-
details是容器，必须存在；summary必须是它的第一个子元素 - 不要把
summary放在div或其他标签里再塞进details—— 它得是直接子元素 - 多个
details可以并列，互不影响，各自维护开闭状态
<details> <summary>Q：怎么重置密码？</summary> <p>A：点击登录页的“忘记密码”，按邮件指引操作。</p> </details>
默认展开、禁用右箭头、自定义图标这些怎么调？
details 默认收起，加 open 属性即可默认展开；右箭头是浏览器 UA 样式，无法用 HTML 控制，但可用 CSS 覆盖（注意兼容性）：
立即学习“前端免费学习笔记（深入）”；
- 默认展开：
<details open></details> - 隐藏原生箭头：
summary::marker { content: "" }（Chrome/Firefox 支持，Safari 需额外处理） - 加自定义图标：用
summary::before插入 Unicode 或 background-image，但要记得用display: list-item保持可点击区域 - 禁用交互（只读展示）：加
disabled属性 —— 注意：这是实验性属性，仅部分 Chromium 版本支持，生产环境慎用
和 JS 实现比，details 有哪些实际限制？
它省事，但真遇到以下场景就得换方案：
- 需要折叠动画（height 过渡）：
details不触发 CSS 过渡，得用 JS 监听toggle事件后手动加 class 控制 - 要同步多个 FAQ 的展开状态（比如“全部展开/收起”按钮）：
details是独立状态，需 JS 遍历操作open属性 - 旧版 Safari（summary::marker 支持弱，图标定制容易失效
- 无障碍方面，部分屏幕阅读器对
details的状态播报不一致，如需强保障，得补 ARIA 属性（aria-expanded、aria-controls）
真正卡住的点往往不在“能不能做”，而在“要不要为一个 FAQ 区域引入 JS 和额外维护成本”。多数内部帮助页、文档侧边栏 FAQ，details 开箱即用；一旦需求滑向“交互动效+状态同步+多端一致”，就该承认：它只是起点，不是终点。
