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 覆盖（注意兼容性）：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

立即学习“前端免费学习笔记（深入）”；

• 默认展开：<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 开箱即用；一旦需求滑向“交互动效+状态同步+多端一致”，就该承认：它只是起点，不是终点。