和可原生实现语义化、可访问的折叠效果；必须为首个子元素，否则交互失效；默认展开需CSS+JS双保险；替换箭头宜用::before；高度动画需JS动态计算scrollHeight。
直接用 <details></details> 和 <summary></summary> 就能做出语义正确、键盘可用、屏幕阅读器友好的问答折叠效果，不需要一行 JavaScript。
为什么<summary></summary>必须是<details></details>的第一个子元素
这是浏览器的硬性要求：只有当 <summary></summary> 是 <details></details> 的**首个子节点**（不能前面有空格、文本或 <p></p> 包裹），点击才能触发展开/收起逻辑。CMS 导出富文本时容易自动加 <p></p>，导致失效。
- ✅ 正确写法：
<details><summary>问题</summary><p>答案</p></details> - ❌ 错误写法：
<details><p><summary>问题</summary></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10595" title="htmlppt.skill"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="htmlppt.skill" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10595" title="htmlppt.skill">htmlppt.skill</a> <p>把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。</p> </div> <a href="/xiazai/skill10595" title="htmlppt.skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p>答案</p></details>（<summary></summary>被<p></p>包住，失去交互） - 错误现象：点击无反应，键盘按空格/回车也不触发，控制台无报错，排查时容易忽略 DOM 结构
如何稳定实现默认展开且不闪屏
<details open></details> 在 Safari ≤15.4 和部分 Android WebView 中会被忽略，服务端渲染后也可能先收再展，造成视觉闪动。
- 强制初始可见：CSS 加
details[open] { display: block; }，同时确保父容器没设display: none - JS 补漏（仅需一行）：
document.querySelectorAll('details[open]').forEach(d => d.open = true) - 别依赖
open做状态判断——它只是 UI 状态，不是数据源；如需同步逻辑，监听toggle事件读取d.open
怎么换掉浏览器默认箭头又不崩布局
不同浏览器对 summary::marker 支持差异大（Safari 尤其弱），直接清空可能丢点击热区或图标错位。
- 安全做法：用
summary::before插入图标，配合position: absolute定位，不干扰::marker渲染逻辑 - 关键 CSS：
summary { list-style: none; padding-left: 24px; position: relative; }+summary::before { content: "▶"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); transition: transform 0.2s; } - 展开旋转：
details[open] summary::before { transform: translateY(-50%) rotate(90deg); } - 移动端热区小？加
padding: 12px到summary，别用min-height—— 它不影响点击区域
需要平滑高度动画时为什么不能只靠 CSS
<details></details> 展开时内容高度从 0 → auto，而 height: auto 无法参与 CSS 过渡，强行设 transition: height 会失效或卡顿。
- 可行方案一（简单但有局限）：用
max-height模拟，预设一个足够大的值，如max-height: 500px；缺点是内容短时“弹跳”，长时可能截断 - 可行方案二（推荐）：监听
toggle事件，用 JS 读取element.scrollHeight，动态设max-height再过渡；收起后记得清空行内max-height，否则后续高度判断出错 - 别单独用
opacity过渡——用户看不见内容高度变化，体验割裂
真正难的不是写法，而是当内容含图片、视频或第三方组件时，scrollHeight 可能因加载延迟不准，得等 img.onload 或 IntersectionObserver 触发后再测高。
