原生 HTML 可用 <details> 和 <summary> 实现无 JS 的折叠 FAQ，需确保 <summary> 为双标签、<details> 直接包裹且首个子元素，并用 open 属性控制默认展开；滚动定位不准时须先设 element.open = true 再调用 scrollIntoView，并配置 { block: 'nearest', inline: 'start' } 及 scroll-margin-top 补偿；批量切换需用 JS 遍历 details 并取反 open 状态；SEO 和可访问性要求内容不被 CSS 隐藏、<summary> 含语义化问句、避免纯图标无 aria-label。
怎么用 <details> 实现点击展开的 FAQ
原生 HTML 就支持折叠 FAQ，不用 JS 也能做，关键就是 <details> 和 <summary>。浏览器兼容性现在很稳（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+），移动端也完全可用。
常见错误是把 <summary> 写成闭合标签（比如 <summary />），它必须有开始和结束标签，否则内容不显示；另外 <details> 默认展开要用 open 属性，不是 opened 或布尔值字符串。
-
<details>必须直接包裹<summary>作为第一个子元素，其他内容跟在后面 - 多个 FAQ 并列时，每个
<details>独立控制，互不影响 - 如果想默认全部收起，就别加
open；想默认展开第一个，只给第一个加open
<details> <summary>Q：HTML 怎么让文字可折叠？</summary> <p>A：用 <details> + <summary>，原生语义化方案。</p> </details>
为什么 scrollIntoView 跳转 FAQ 后经常不准
FAQ 列表长了，用户点标题跳转到对应 <details> 时，经常卡在顶部以下一截，或被固定导航栏挡住——这不是 bug，是 scrollIntoView 默认行为没配对。
根本原因是：未展开的 <details> 高度为 0，scrollIntoView 按“当前渲染尺寸”计算位置，等滚动完它才展开，视觉就偏了。
立即学习“前端免费学习笔记（深入）”；
- 必须在调用
scrollIntoView前确保目标已展开（element.open = true） - 推荐用
{ block: 'nearest', inline: 'start' }，避免强行滚到顶部干扰阅读流 - 如果页面有
position: sticky导航栏，加上scroll-margin-top补偿偏移，比如details { scroll-margin-top: 80px; }
如何让多个 FAQ 同时展开/收起（不依赖 JS 框架）
纯 HTML 不支持批量控制，但可以用极简 JS 绑定按钮，关键是复用 DOM 方法，不重复查节点。
容易踩的坑是：用 querySelectorAll('details') 后直接遍历设 open = true，结果所有都展开，但用户其实只想「展开未开的，收起已开的」——这时候该用切换逻辑。
- 用
document.querySelectorAll('details')获取全部，再用.forEach()遍历 - 判断当前状态：
if (el.open) { el.open = false; } else { el.open = true; } - 绑定按钮时，加
type="button"，防止表单意外提交
<button type="button" onclick="toggleAll()">切换全部</button>
<script>
function toggleAll() {
document.querySelectorAll('details').forEach(el => {
el.open = !el.open;
});
}
</script>
折叠 FAQ 的 SEO 和可访问性要注意什么
搜索引擎能正常索引 <details> 里的内容，但前提是它没被 CSS 强制隐藏（比如 display: none），也不能用 JS 动态插入后不触发重排。
屏幕阅读器支持良好，但有个细节常被忽略：如果 <summary> 里只有图标（比如 ▶️），必须加 aria-label 或文本说明，否则读屏器会念“button”，用户不知道点开是啥。
- 不要用
visibility: hidden或opacity: 0替代<details>，会破坏语义和可访问性 - 每个
<summary>应该是完整问句，避免“点击查看”这类无意义文案 - 如果 FAQ 条目很多，考虑加
id并配合锚点链接，方便外部引用和分享
最麻烦的其实是样式定制——<summary> 的默认三角图标没法用 CSS 直接改，得用 ::marker（支持有限）或隐藏后手写伪元素，这个一旦动了就得连带测试 Safari 和旧 Edge。
