和是faq模块的现代标准方案，语义正确、可访问性好、维护成本低；仅适用于线性步骤，不适用于可选展开的独立问答。
<details></details> 和 <summary></summary> 是制作常见问答模块的现代标准方案，比用 <ol></ol> 手动编号更语义正确、可访问性更好、维护成本更低。别硬套有序列表——它只适合「步骤必须按 1→2→3 执行」的场景，不是为 FAQ 设计的。
为什么不用 <ol></ol> 做 FAQ
FAQ 的本质是「可选展开的独立问题」，不是线性流程。用 <ol></ol> 会带来三个实际问题：
- 编号失去意义：用户不会按顺序逐条阅读，第 5 条问题被点开时，前面 4 条仍闭合，视觉上“5”毫无上下文
- 无法响应式展开/收起：
<ol></ol>没有原生交互能力，必须配 JS 控制display或hidden，增加出错概率 - 对屏幕阅读器不友好：单纯数字编号不传达“可点击”“可折叠”语义，而
<details></details>自带role="group"和aria-expanded
<details></details> 的基础写法与常见错误
最简可用结构只有三行，但极易因嵌套错位失效：
- 必须确保
<summary></summary>是<details></details>的**第一个且唯一一个**子元素；不能包在<p></p>、<div> 或标题标签里<li> <code><summary></summary>内部禁止使用块级元素（如<h3></h3>、<p></p>），否则 Safari/旧 Edge 点击无响应 - 内容区建议用
<p></p>或<div> 包裹，避免直接放文本（防样式塌陷和语义缺失）<p>✅ 正确示例：<br></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a> <p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p> </div> <a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;"><details><br><summary>Q: 页面加载慢怎么办？</summary><br><p>检查是否在 <code></code> 中加载了未压缩的 JS 文件。</p> <br></details></pre> <h3>让多个 FAQ 互斥展开（单选模式）</h3> <p>浏览器原生 <code><details></details>不支持“点一个、关其他”，需微量 JS 补齐：- 监听
toggle事件（不是click），只在event.target.open === true时执行关闭逻辑 - 用
document.querySelectorAll('details:not([open])')筛选未展开项，避免刚点开的那个被误关 - 不要给所有
<details></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></summary>的默认箭头处理不一致，直接list-style: none清不干净：- 必须同时重置
summary::marker和用summary::after补图标，否则 Safari 仍显示原生三角 - 高度过渡动画（
max-height）容易因内容高度动态变化而抖动，推荐用clip-path动画 - 切勿给
<details></details>设overflow: hidden—— 它会裁掉<summary></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 需要的是「可发现性」和「无障碍交互」，不是编号。别为了看起来“整齐”牺牲语义和可用性。
- 监听
