details + summary 是最简稳的 FAQ 折叠结构,原生支持无障碍、键盘操作和 SEO,但需严格遵循嵌套规则:summary 必为 details 唯一直接子元素,不可包裹于 div 或 heading 中,且不支持嵌套。

details + summary 是当前最简、最稳的 FAQ 折叠结构,不需要 JS 就能支持展开/收起、键盘操作和屏幕阅读器,但必须写对顺序和嵌套规则。
为什么不能用 div + JS 模拟折叠
手写 JS 控制 display 或 hidden 会立刻掉进三个坑:一是必须手动补全 aria-expanded、aria-controls 和焦点管理,漏一项就对键盘或读屏用户不友好;二是动画若用 height 过渡,内容高度动态时容易抖动或截断;三是搜索引擎可能无法索引默认隐藏的内容——除非你确保服务端已渲染全部 HTML。而 details 原生就处理了这些。
-
details在 Chrome 12+、Firefox 49+、Safari 6.1+、Edge 79+ 全支持,IE 不支持但可优雅降级为全部展开 - 它自动绑定空格/回车切换、Tab 键聚焦、屏幕阅读器播报“已折叠/已展开”
- 不支持嵌套——
details里面不能再套details,旧版 Safari 会失效
summary 必须是 details 的第一个且唯一子元素
这是最容易翻车的地方。写成 <details><div><summary>Q?</summary></div><p>A</p></details> 或 <details><h3><summary>Q?</summary></h3><p>A</p></details> 都会导致点击无反应,因为浏览器只认直接子级的 summary。
- 正确结构只能是:
<details><summary>问题文本</summary><p>答案内容</p></details> -
summary内部可用<strong>或<span>加粗关键词,但不能塞<div>、<h3>等块级标签 - 别给
summary加role="button"——它本来就是可交互元素,加了反而干扰读屏逻辑
如何让 URL 锚点自动展开对应 FAQ
用户点击 help.html#payment-failed,浏览器应该滚动到那个条目并展开它。原生 details 不会自动响应 hash,得靠 :target 伪类或极简脚本。
立即学习“前端免费学习笔记(深入)”;
- CSS 方案(推荐):
details:target { open: true; },注意 Safari 15.4+ 才完全支持,旧版需兜底 - JS 补漏(一行就够):
document.getElementById(location.hash.slice(1))?.open = true;,放在<body>底部或 DOMContentLoaded 后执行 - ID 值必须合法:不能含空格、中文、特殊符号;建议用小写连字符,如
id="login-timeout" - 别在
summary上设tabindex="-1"——这会让键盘用户跳过整个 FAQ 条目
结构化数据怎么配才被 Google 当作 FAQ 富文本
光有 details 结构,Google 不会识别为 FAQ 卡片。必须加 FAQPage Schema,而且格式错一点就白搭。
- 必须用
WebPage作为外层类型,再通过mainEntity指向Question,不能直接用FAQPage作顶层 -
name和acceptedAnswer.text必须是纯文本,不能带<p>、<strong>标签,否则 JSON-LD 解析失败 - 所有字段值要用
JSON.stringify()处理,避免引号、换行导致语法错误 - Schema 必须放在
<head>或页面顶部的<script type="application/ld+json">中
最常被忽略的是:页面上改了 FAQ 文本,但头部的 JSON-LD 没同步更新。Google 明确要求结构化数据必须与可见内容严格一致,脱节就失去富文本资格。



















