原生 html 的 和 可实现无障碍、语义化的可折叠 faq，无需 js； 必须为 的第一个子元素，支持 open 属性默认展开，主流浏览器均兼容，但不支持 ie 且不可嵌套。
用 <details></details> 和 <summary></summary> 实现可折叠 FAQ
原生 HTML 就能做交互式 FAQ，不需要 JS 或额外库。核心是 <details></details>（容器）配 <summary></summary>（标题），浏览器自动处理展开/收起逻辑和 ARIA 属性。
常见错误是把 <summary></summary> 写成块级元素再塞文字，导致点击区域变小或样式错乱；或者在 <summary></summary> 外加 <h3></h3>，破坏语义层级。
-
<summary></summary>必须是<details></details>的**第一个子元素**，否则不生效 - 默认展开用
open属性：<details open></details> - 不支持 IE，但 Edge 79+、Chrome 12+、Firefox 49+、Safari 6+ 都 OK
- 可直接用 CSS 选中
details[open] > summary::after自定义箭头图标
为什么不用 <dl></dl> + <dt></dt>/<dd></dd> 做 FAQ？
<dl></dl> 是语义正确的“定义列表”，适合静态问答对，但天生不带交互能力。想加折叠功能，必须靠 JS 控制 display 或 hidden，同时手动补 ARIA（如 aria-expanded、aria-controls），容易漏掉焦点管理或键盘操作（空格/回车触发）。
实际项目里，如果 FAQ 只是纯展示、无交互需求，<dl></dl> 更轻量；一旦要可折叠，<details></details> 省事且更健壮。
-
<dl></dl>的语义重点在“术语-解释”关系，不是“问题-答案”的交互场景 - SEO 对两者都友好，但
<details></details>的展开状态可能影响爬虫抓取内容（未展开时部分<details></details>内容在 DOM 中仍存在，只是视觉隐藏） - 不能嵌套
<details></details>—— 某些旧版 Safari 会失效，需避免
<details></details> 的无障碍和键盘支持要点
原生组件已内置基础无障碍支持：屏幕阅读器能读出“已展开/已折叠”，Tab 键可聚焦，空格/回车可切换状态。但默认样式简陋，自定义时容易破坏这些能力。
- 别用
display: none隐藏<summary></summary>—— 这会让屏幕阅读器完全跳过它 - 若重置
<summary></summary>样式，保留cursor: pointer和outline（聚焦可见） - 不要给
<summary></summary>加role="button"—— 它已是可交互元素，加了反而干扰 - 展开后内容区无需额外
aria-hidden，浏览器自动处理
服务端渲染或静态站点里的兼容兜底方案
如果必须支持 IE 或某些老旧 WebView（比如微信内置浏览器旧版本），<details></details> 会退化为始终展开。此时不能强行 polyfill，而应让降级体验保持可用——即确保所有问答内容默认可见，且结构清晰。
- 用
@supports (display: details)CSS 规则控制折叠样式，避免在不支持的环境里出现错位 - 避免依赖
<details></details>的 JS 事件（如toggle），改用 class 切换模拟状态，便于统一控制 - 静态生成工具（如 Hugo、Jekyll）里，可预渲染
open属性，保证首屏内容可读
真正麻烦的是样式穿透和动画——<details></details> 内容高度无法用 CSS transition 直接过渡，得靠 JS 测高或改用 max-height 动画，这点容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
