details标签默认单开，需用JS监听summary点击事件并手动设置details.open属性来实现多开或单开；注意preventDefault防聚焦干扰，避免toggleAttribute触发默认行为。

details标签默认行为不支持多开，得用JS干预

原生 <details> 标签默认是「单开」的：点开一个，其他自动收起。手风琴菜单通常需要「点击展开当前、保持其他状态不变」，这和浏览器默认逻辑冲突，必须用 JS 拦截默认行为或改用受控模式。

关键不是“怎么让 details 展开”，而是“怎么阻止它自动关闭别的”。最稳妥的做法是不用 open 属性做切换，改用 JS 手动控制每个 <details> 的 open 状态，且不依赖 toggle 事件的默认冒泡行为。

• 不要给多个 <details> 直接加 open 属性——浏览器会强制只留一个打开
• 所有展开/收起操作必须通过 JS 设置 element.open = true/false
• 监听 <summary> 的 click 事件，而不是 <details> 的 toggle 事件（后者在用户手动点击时已触发，不好拦截）

用 JS 绑定 summary 点击并手动控制 open 状态

每个 <summary> 都要绑定 click，拿到父级 <details>，再翻转它的 open 属性。注意别用 toggleAttribute('open')，那会触发浏览器默认逻辑；直接赋值最可靠。

anything-to-html

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

下载

document.querySelectorAll('details summary').forEach(summary => {
  summary.addEventListener('click', (e) => {
    e.preventDefault(); // 防止 summary 默认聚焦行为干扰
    const details = summary.parentElement;
    details.open = !details.open;
  });
});

• e.preventDefault() 主要避免点击后 <summary> 被意外聚焦（尤其在 Safari 中可能引发滚动）
• 不用 details.toggleAttribute('open')，因为某些浏览器下它仍会联动关闭其他 <details>
• 如果想实现「单开」（即点一个关其他），就在翻转前遍历所有同级 <details>，把非目标项设为 open = false

兼容性要注意：Safari 对 details 的 focus 行为较特殊

Safari 会自动给被点击的 <summary> 加 :focus，有时导致样式跳变或意外滚动到顶部。这不是 bug，但会影响手风琴体验。

立即学习“前端免费学习笔记（深入）”；

• 加 CSS 重置：summary:focus { outline: none; }，再补上可访问性等效样式（比如 box-shadow）
• 如果页面有 <main> 或容器设置了 scroll-behavior: smooth，Safari 可能因 focus 触发平滑滚动，建议对 summary 单独禁用：summary { scroll-margin-top: 0; }
• 旧版 Safari（<details> 的 open 属性动画，但 JS 控制状态本身是兼容的

想加过渡动画？只能靠 max-height + overflow，不能直接 transition open

open 属性本身无法被 CSS 过渡，浏览器不把它当作可动画属性。真要加展开收起动画，得用 max-height + overflow 模拟，同时保持 <details> 的语义结构。

• 给 <details> 加 overflow: hidden 和 transition: max-height 0.3s ease
• 初始状态设 max-height: 0，展开时设为足够大的值（如 max-height: 500px）
• JS 中切换的是 class（如 is-open），而不是直接操作 open 属性——此时 <details> 的语义功能退化为容器，需额外用 aria-expanded 补全可访问性
• 纯 <details> + JS 控制是最轻量方案；加动画就得在语义和动效之间做取舍

细节和 JS 的耦合点其实就两个：是否依赖原生交互语义、是否接受无动画。选前者就老老实实只改 open；选后者就得自己接管高度和 ARIA。