details标签折叠功能失效主因是summary未作为其直接且首个子元素；open为布尔属性，JS应操作open属性而非样式；自定义箭头需用summary::before并清除原生标记；折叠不暂停媒体，须监听toggle事件手动控制。

details 标签本身就能实现折叠，但写错结构就完全点不动——不是浏览器不支持，而是 HTML 解析直接跳过交互逻辑。

summary 必须是 details 的第一个子元素

这是最常导致“点了没反应”的原因。浏览器只认 summary 作为触发器，且它必须是 details 的**直接子节点**，前面不能有任何空白、注释或块级标签。

• ✅ 正确：
  标题

  内容

• ❌ 错误：
  标题

  内容

  （summary 不是直接子元素）
• ❌ 错误：
  标题
  （注释使 summary 不再是第一个子节点）
• ❌ 错误：

  说明

  标题
  （summary 不是首个子元素）

open 属性控制默认展开状态

open 是布尔属性，有即展开，无即收起。它不是字符串值，不能写成 open="true" 或 open="open"。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 默认收起：直接写
  标题

  内容
• 默认展开：加 open 属性：
  常见问题

  答案在这里

• 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。比如折叠区里有个 ，收起后依然在播放。

• 监听 toggle 事件，在 !el.open 时手动调用 .pause()、清空 .src 或移除节点
• 表单中用 details 包裹字段时注意：它不参与提交，如有依赖需 JS 同步值
• 嵌套 details 不可靠，多数浏览器不支持多层原生折叠，如需手风琴效果，必须用 JS 监听 toggle 并手动关闭兄弟节点

真正容易被忽略的，是 DOM 解析对“第一个子节点”的严格定义——哪怕一个换行符，都可能让 Safari 完全拒绝响应点击。写完务必检查渲染后的实际子节点顺序，别只看源码缩进。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！