应使用 details + summary 实现 faq 折叠，它原生支持可访问性、seo 和无需 js 的交互；summary 仅允许短语级内容，禁用块级标签；需扩大移动端点击区域并修复 ios safari 点击异常。
点击展开/收起 FAQ 项必须用 details + summary
原生语义化方案最稳，不用 JS 就能实现开合、支持键盘聚焦和屏幕阅读器。浏览器兼容性从 Chrome 12、Firefox 49、Safari 6 开始就已覆盖主流环境（IE 完全不支持，但 IE 已退出历史舞台）。
常见错误是手动写 div + onclick + CSS 切换类名——这不仅多写几十行代码，还容易漏掉 aria-expanded、tabindex 等可访问性属性，且无法响应右键“复制问题”等原生行为。
正确写法示例：
<details><summary>如何重置密码？</summary><p>请访问登录页点击「忘记密码」，按邮件链接操作即可。链接 15 分钟内有效。</p> </details>
summary 里不能直接放 h3 或其它块级标签
HTML 规范明确要求 summary 只能包含短语级内容（phrasing content），嵌套 h3 会触发验证警告，且部分屏幕阅读器可能跳过或误读层级。
如果需要视觉加粗或字号变化，用 CSS 控制 summary 自身样式即可：
- 用
summary { font-weight: 600; font-size: 1.1em; } - 想加图标？用伪元素：
summary::before { content: "▶ ";}，再配合[open] summary::before { content: "▼ ";} - 绝对不要写成
<summary><h3>为什么登录失败？</h3></summary>
多个 FAQ 页面需 SEO 友好，得保留所有内容在 HTML 源码中
搜索引擎爬虫不会执行 JS，也不识别 CSS 的 display: none。如果用 JS 动态加载问答内容，或靠 JS 控制显隐，FAQ 文本将无法被索引，导致页面搜索曝光归零。
details 天然满足 SEO 要求：所有 <p></p>、<ul></ul> 等子内容始终存在于 DOM 中，只是默认折叠。Google 已明确表示能正常抓取并索引 details 内的文本。
注意两点：
- 别给
details加hidden属性，否则内容会被爬虫忽略 - 每个
summary文本应精准匹配用户真实搜索词（如“微信支付失败”比“支付问题”更易被搜到”）
移动端点击区域太小，必须扩大 summary 的可点范围
原生 summary 默认只有文字区域响应点击，在手机上极易点偏。这不是 bug，是规范行为——你得自己扩展热区。
推荐做法：
- 给
summary设padding: 16px（至少 44×44px 符合苹果人机指南） - 加
cursor: pointer提示可交互 - 移除默认下划线：
summary { text-decoration: none; } - 避免用
margin扩展，它不增加点击区域，只撑开空白
额外提醒：iOS Safari 有个老问题——details[open] 状态下，快速连续点击 summary 可能卡住不收起。加一句 summary { -webkit-tap-highlight-color: transparent; } 可缓解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
