HTML中details与summary_HTML原生折叠面板全解析-html教程-PHP中文网

details和summary必须严格满足结构要求才能正常工作：summary必须是details的第一个子元素，中间不能有空格、换行或注释；open属性仅通过html存在与否生效，js赋值无效；状态监听须用toggle事件而非click。

html中details与summary_html原生折叠面板全解析

details 和 summary 能直接实现无 JS 折叠，但写错一个空格、放错一个位置，就完全不工作——不是浏览器不支持，而是结构被破坏了。

summary 必须是 details 的第一个子元素，且中间不能有空格或注释

这是最常踩的坑。哪怕 <details>\n <summary>标题</summary></details> 这种换行，在 Safari 中也会让 summary 失效：它变成普通文本，点击无反应，小三角图标消失，控制台还不报错。

常见错误现象：

点击后内容始终可见（相当于默认 open 但无法关闭）
summary 渲染成纯文字，没有折叠控件语义
用 display: block 强制样式后，::marker 图标被干掉

正确写法只有一种：<details><summary>标题</summary>内容…</details>，<summary></summary> 紧贴 <details></details> 开始标签，中间零字符（包括空格、换行、HTML 注释）。

open 属性只能通过 HTML 属性或 toggleAttribute 控制

想默认展开？必须写 <details open><summary>…</summary></details>。JS 写 el.open = true 或 el.setAttribute('open', 'true') 都无效——浏览器只认初始 HTML 是否存在该布尔属性。

切换状态时也一样：

✅ 正确：el.toggleAttribute('open')
❌ 无效：el.open = false（UI 不变）
❌ 错误：el.setAttribute('open', 'false')（会变成字符串值，仍视为 true）
✅ 关闭：el.removeAttribute('open')

SSR 场景下尤其要注意：服务端渲染时动态输出 open 属性，比客户端 JS 补开更稳，避免水合后内容先闪一下再收起。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

监听状态变化要用 toggle 事件，不是 click

details 的状态变更发生在浏览器内部逻辑完成之后，click 事件触发太早，此时 details.open 还没更新。

所以手风琴效果（点一个开，其他关）必须这样写：

document.querySelectorAll('details').forEach(details => {
  details.addEventListener('toggle', () => {
    if (details.open) {
      document.querySelectorAll('details').forEach(d => {
        if (d !== details) d.removeAttribute('open');
      });
    }
  });
});

注意点：