如何利用HTML的details标签制作常见问题FAQ列表-html教程-PHP中文网

是轻量语义化faq方案，但需严守结构约束（须为首个唯一子元素）、用details:target或js实现锚点展开、扩大移动端点击区、以clip-path实现动画，并兼顾可访问性与兼容性。

如何利用html的details标签制作常见问题faq列表

<details></details> 是目前最轻量、语义正确且无需 JS 就能工作的 FAQ 方案，但直接套用容易在锚点跳转、动画、移动端点击区域和 Safari 兼容性上翻车。

浏览器只认严格结构：<summary></summary> 必须是 <details></details> 的**第一个且唯一子元素**，后面才能跟内容。嵌套 <h3></h3>、<p></p> 或多个 <summary></summary> 会触发渲染异常或交互失效。

✅ 正确写法：<details><summary>问题标题</summary><p>答案内容</p></details>
❌ 错误写法：<details><div><summary>…</summary></div> <p>…</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter"><img src="https://img.php.cn/upload/skill/000/000/081/179232667384043.jpg" alt="html-to-pptx-converter" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="overflowclass">html-to-pptx-converter</a> <p class="overflowclass">使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。</p> </div> <a rel="nofollow" href="/xiazai/skill8961" title="html-to-pptx-converter" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></details>（<summary></summary> 不再是首子元素）
❌ 错误写法：<details><summary>Q1</summary><summary>Q2</summary><p>…</p></details>（多个 <summary></summary>）
默认收起；加 open 属性可默认展开：<details open></details>

用户点击 faq.html#how-to-reset 时，浏览器不会自动设 open=true —— 这是原生限制，必须靠 details:target CSS 或极简脚本补全。

CSS 方案（推荐，兼容 Chrome/Firefox）：details:target { open: true; }，前提是每个 <details></details> 有匹配的 id，如 <details id="how-to-reset"></details>
Safari 15.4 以下不支持 details:target { open: true }，需加一行 JS：document.getElementById(location.hash.slice(1))?.setAttribute('open', '')
ID 值不能含空格或中文；建议用小写拼音或 encodeURIComponent() 处理后截取，例如 “忘记密码？” → id="forgot-password"

原生 <summary></summary> 默认热区仅覆盖文字本身，在手机上极易点不准或滑动误触发。这不是 bug，是设计缺陷，必须手动扩大。

<details></details> 的 open 是布尔属性，无法直接过渡；用 height 动画会因内容高度动态变化导致抖动、计算错误或布局重排。

稳妥方案是用 clip-path：details summary ~ * { clip-path: inset(0 0 100% 0); transition: clip-path 0.25s ease; } + details[open] summary ~ * { clip-path: inset(0); }
不要给 <details></details> 设 overflow: hidden —— 它会裁掉 <summary></summary> 下边框或阴影，造成视觉割裂
若内容高度固定，可用 max-height + transition，但需预估足够大的值，否则动画会卡顿
@starting-style 目前仅 Chrome 119+ 支持，生产环境慎用