<details>和<summary>是FAQ模块的现代标准方案，语义正确、可访问性好、维护成本低；<ol>仅适用于线性步骤，不适用于可选展开的独立问答。
<details> 和 <summary> 是制作常见问答模块的现代标准方案，比用 <ol> 手动编号更语义正确、可访问性更好、维护成本更低。别硬套有序列表——它只适合「步骤必须按 1→2→3 执行」的场景，不是为 FAQ 设计的。
为什么不用 <ol> 做 FAQ
FAQ 的本质是「可选展开的独立问题」，不是线性流程。用 <ol> 会带来三个实际问题：
- 编号失去意义：用户不会按顺序逐条阅读，第 5 条问题被点开时，前面 4 条仍闭合，视觉上“5”毫无上下文
- 无法响应式展开/收起：
<ol>没有原生交互能力，必须配 JS 控制display或hidden，增加出错概率 - 对屏幕阅读器不友好：单纯数字编号不传达“可点击”“可折叠”语义，而
<details>自带role="group"和aria-expanded
<details> 的基础写法与常见错误
最简可用结构只有三行，但极易因嵌套错位失效：
- 必须确保
<summary>是<details>的**第一个且唯一一个**子元素；不能包在<p>、<div>或标题标签里 -
<summary>内部禁止使用块级元素（如<h3>、<p>），否则 Safari/旧 Edge 点击无响应 - 内容区建议用
<p>或<div>包裹，避免直接放文本（防样式塌陷和语义缺失）
✅ 正确示例：
<details><br> <summary>Q: 页面加载慢怎么办？</summary><br> <p>检查是否在 <code><head></code> 中加载了未压缩的 JS 文件。</p><br></details>
立即学习“前端免费学习笔记（深入）”；
让多个 FAQ 互斥展开（单选模式）
浏览器原生 <details> 不支持“点一个、关其他”，需微量 JS 补齐：
- 监听
toggle事件（不是click），只在event.target.open === true时执行关闭逻辑 - 用
document.querySelectorAll('details:not([open])')筛选未展开项，避免刚点开的那个被误关 - 不要给所有
<details>加id—— 只有需要锚点跳转（如分享链接带#why-slow）时才加
关键片段：
document.addEventListener('toggle', e => {<br> if (e.target.open) {<br> document.querySelectorAll('details:not([open])').forEach(d => d.open = false);<br> }<br>});
样式统一与动画注意事项
各浏览器对 <summary> 的默认箭头处理不一致，直接 list-style: none 清不干净：
- 必须同时重置
summary::marker和用summary::after补图标，否则 Safari 仍显示原生三角 - 高度过渡动画（
max-height）容易因内容高度动态变化而抖动，推荐用clip-path动画 - 切勿给
<details>设overflow: hidden—— 它会裁掉<summary>的下边框或阴影，造成视觉割裂
安全写法：
details summary ~ * {<br> clip-path: inset(0 0 100% 0);<br> transition: clip-path 0.25s ease;<br>}<br>details[open] summary ~ * {<br> clip-path: inset(0);<br>}
真正难的不是写出来，而是想清楚：FAQ 需要的是「可发现性」和「无障碍交互」，不是编号。别为了看起来“整齐”牺牲语义和可用性。
