details标签折叠功能失效主因是summary未作为其直接且首个子元素；open为布尔属性，JS应操作open属性而非样式；自定义箭头需用summary::before并清除原生标记；折叠不暂停媒体，须监听toggle事件手动控制。
details 标签本身就能实现折叠，但写错结构就完全点不动——不是浏览器不支持，而是 HTML 解析直接跳过交互逻辑。
summary 必须是 details 的第一个子元素
这是最常导致“点了没反应”的原因。浏览器只认 summary 作为触发器，且它必须是 details 的**直接子节点**，前面不能有任何空白、注释或块级标签。
- ✅ 正确：
<details><summary>标题</summary><p>内容</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/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill9263" title="Html2md">Html2md</a> <p>使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></details> - ❌ 错误：
<details><div><summary>标题</summary></div> <p>内容</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></details>（summary不是直接子元素） - ❌ 错误：
<details><!-- 注释 --><summary>标题</summary></details>（注释使summary不再是第一个子节点） - ❌ 错误：
<details><p>说明</p> <summary>标题</summary></details>（summary不是首个子元素）
open 属性控制默认展开状态
open 是布尔属性，有即展开，无即收起。它不是字符串值，不能写成 open="true" 或 open="open"。
- 默认收起：直接写
<details><summary>标题</summary>内容</details> - 默认展开：加
open属性：<details open><summary>常见问题</summary><p>答案在这里</p></details> - JS 控制：用
el.open = true或el.toggleAttribute('open')，别改style.display—— 否则toggle事件不触发、屏幕阅读器读不出状态
自定义箭头必须用 summary::before
summary::marker 在 Safari ≤15.6 和部分旧版 Edge 中不生效；::-webkit-details-marker 又只限 WebKit。统一用 summary::before 才能跨浏览器稳定显示和旋转。
- 先清空原生图标：
summary { list-style: none; } - 再加自定义图标：
summary::before { content: "▶"; margin-right: 6px; transition: transform .2s; } - 展开时旋转：
details[open] > summary::before { transform: rotate(90deg); } - 别给
summary设display: inline-block或float，会破坏点击热区
折叠后的内容仍在运行，关键逻辑要手动暂停
details 只控制显隐，不暂停内部脚本、视频、音频或 iframe。比如折叠区里有个 <video autoplay></video>，收起后依然在播放。
- 监听
toggle事件，在!el.open时手动调用.pause()、清空.src或移除节点 - 表单中用
details包裹字段时注意：它不参与提交，如有依赖需 JS 同步值 - 嵌套
details不可靠，多数浏览器不支持多层原生折叠，如需手风琴效果，必须用 JS 监听toggle并手动关闭兄弟节点
真正容易被忽略的，是 DOM 解析对“第一个子节点”的严格定义——哪怕一个换行符，都可能让 Safari 完全拒绝响应点击。写完务必检查渲染后的实际子节点顺序，别只看源码缩进。
