原生 <details> 和 <summary> 可零 JavaScript 实现语义化、无障碍折叠问答，支持键盘操作与屏幕阅读器；默认收起，加 open 属性可默认展开；多组独立并列；样式定制推荐用 summary::before 替换箭头；IE 不支持，需 polyfill 或降级。
直接用 <details> 和 <summary> 就能原生实现折叠问答，不写一行 JavaScript，语义清晰、键盘可用、屏幕阅读器友好。
基础结构：一个 FAQ 项就两层标签
每个问答项用一个 <details> 包裹，<summary> 放问题文字，后面紧跟答案内容（任意 HTML，如 <p>、<ul>、<div> 等）：
-
<summary>必须是<details>的第一个子元素，否则点击无效 - 默认收起，用户点击
<summary>文字区域（含空格、图标）即可切换展开/收起 - 浏览器自动添加方向箭头，支持键盘 Enter / Space 触发，无需额外 ARIA 属性
默认展开与多组并列写法
让某条问答默认打开，只需给 <details> 加 open 属性：
<details open><summary>常见问题</summary><p>答案内容</p></details>- 多个 FAQ 并列时，各自独立，互不影响；每组都用单独的
<details>，不要嵌套 - 避免在
<summary>内放<button>、<input>等可聚焦元素，以防打断原生行为
简单样式定制：隐藏原生箭头 + 添加图标
浏览器对 ::marker 支持不一（Safari 尤其弱），推荐统一用 ::before 控制图标：
立即学习“前端免费学习笔记（深入）”；
- 先清除默认箭头：
summary { list-style: none; } - 加自定义符号：
summary::before { content: "▶"; margin-right: 6px; } - 展开时旋转：
details[open] > summary::before { content: "▼"; } - 可配合
transition: transform 0.2s实现平滑转动（仅限旋转，高度过渡仍需 JS）
无障碍与兼容性注意点
原生标签已自带良好可访问性，但定制时需守住底线：
- 别用
display: none或visibility: hidden隐藏<summary>，它必须始终可见且可聚焦 - IE 完全不支持，如需兼容，得引入 polyfill（如
details-polyfill）或降级为 JS 方案 - 主流浏览器（Chrome 12+、Firefox 49+、Edge 79+、Safari 6+）均支持，无需担心现代项目
