details+summary原生支持可折叠问答，summary必须为details首个子元素；需清除默认箭头并用伪元素自定义图标；支持键盘操作但焦点不自动进入内容区；IE不支持，Edge 79+稳定；SEO友好且性能轻量。
用 details + summary 实现可折叠问答列表
HTML 原生就支持问答折叠，不需要 JS 或 CSS 框架。核心是 details 和 summary 这一对语义化标签——details 是容器，summary 是点击展开/收起的标题行。
常见错误是把 summary 写成独立标签、或嵌套在 p 里；它必须是 details 的第一个子元素，否则无法触发折叠行为。
实操建议：
-
summary里可以放文字、图标（如▾）、甚至span，但别加button—— 它自己就是可交互元素 - 默认展开？加
open属性：<details open> - 想让多个问题互斥（单选展开）？原生不支持，得用 JS 监听
toggle事件手动关闭其他details
样式微调：去掉默认箭头、对齐文字、控制间距
浏览器给 summary 加了右对齐的三角形箭头，且不同浏览器位置/颜色不一致。要统一外观，必须重置 list-style 并用伪元素补图标。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑是只写 list-style: none 却忘了 summary::marker 在部分浏览器（如 Safari）里仍会显示箭头。
实操建议：
- 清除原生标记：
summary { list-style: none; } summary::marker { content: ""; } - 加自定义图标（比如右向三角）：
summary::after { content: "▶"; margin-left: 8px; }，再用details[open] summary::after { content: "▼"; }切换状态 -
details默认有上下外边距，和相邻问答之间容易空太大，建议设margin-block: 0.5em控制间距
无障碍与 SEO 注意点：别丢掉语义和聚焦逻辑
details/summary 天然支持键盘操作（Tab 进入、Space 展开），但若手动加了 role="button" 或覆盖了默认行为，反而会破坏屏幕阅读器识别。
真实场景中常被忽略的是：当用户用键盘打开一个 details 后，焦点不会自动跳进内容区——如果答案里有链接或表单，用户还得再按几次 Tab 才能到达，体验断层。
实操建议：
- 绝对不要给
summary加tabindex或role，让它保持原生语义 - 如果内容区首元素重要（比如“立即购买”按钮），可在 JS 中监听
toggle事件，检测details.open === true后focus()到目标元素 - 搜索引擎能正常索引
details内所有文本，但折叠状态不影响收录——所以 FAQ 页面无需额外处理 SEO
兼容性底线：IE 不行，Edge 79+ 才稳定
IE 完全不支持 details/summary，Edge 18 及更早版本也存在渲染错位或事件不触发的问题。如果你的用户还有大量旧版 Edge，就得降级方案。
性能上毫无压力——这是原生 DOM 行为，无 JS 解析开销，比手写 display: none/block 切换还轻量。
实操建议：
- 检查是否需兼容 Edge ≤79：用
if (!("open" in document.createElement("details")))做特性检测 - 降级方案不是重写整套 JS 折叠逻辑，而是仅对不支持的环境，用
style="display: block"强制展开全部，并隐藏summary的点击态样式 - 别用 Babel 或 PostCSS 处理这个——它跟 JS 编译无关，纯 HTML/CSS 特性
最复杂的地方其实是设计意图和交互预期的对齐：用户点一下，是只想看答案，还是希望页面滚动到这个问答、高亮关键词、甚至记录浏览路径？这些都不是 details 能自动完成的，得在它基础上叠加轻量 JS，而不是推翻重来。
