动态插入的details元素需手动绑定toggle事件，因其不冒泡且旧版浏览器不支持；绑定须在插入前完成，避免死循环和DOM结构错误。
动态插入的 details 元素必须手动绑定 toggle 事件
原生 details 标签不会自动为动态插入的节点补全事件监听器。你用 innerHTML、insertAdjacentHTML 或 template.content 插入新 details 后，它虽然能点击展开/收起（这是浏览器默认行为），但 toggle 事件不会自动触发——除非你显式调用 addEventListener。
常见错误是只在页面加载时绑定一次，比如：
document.querySelectorAll('details').forEach(d => d.addEventListener('toggle', handler));这段代码只作用于初始 DOM 中已存在的 details，对后续动态添加的完全无效。
- 每次插入新卡片或区块后，必须立即获取该节点并单独绑定
toggle监听器 - 推荐在创建 DOM 片段后、插入前完成绑定，避免竞态（如插入后又被其他脚本移除）
- 若用
template构建，记得从template.content取出真实元素再绑定，而非对字符串操作
toggle 事件不冒泡，无法委托到父容器
toggle 是一个非冒泡事件，这意味着你不能像处理 click 那样，在 document 或某个父级 div 上统一监听所有子 details 的状态变化。
立即学习“前端免费学习笔记（深入）”；
试图这样写是无效的：
document.body.addEventListener('toggle', e => { if (e.target.matches('details')) { /* 不会触发 */ } });- 必须直接在每个
details元素上调用addEventListener('toggle', ...) - 如果批量插入，可用
querySelectorAll在插入后立即遍历新节点（注意限定范围，比如只查刚插入的容器内） - 不要依赖事件委托；这是该事件的设计限制，不是 bug
监听逻辑里别改 e.target.open，否则触发无限循环
toggle 事件在 DOM 状态更新后同步触发，此时 e.target.open 已是最新的布尔值。如果你在回调中又执行 e.target.open = !e.target.open 或 e.target.toggleAttribute('open')，就会再次触发 toggle 事件，形成死循环。
典型翻车代码：
details.addEventListener('toggle', e => { if (!e.target.open) { e.target.open = true; // ⚠️ 触发第二次 toggle } });- 仅读取
e.target.open判断状态，用于副作用（如发请求、改样式、更新 summary 文本） - 如需强制展开/收起，请确保逻辑有明确条件约束（例如仅在首次展开时加载内容）
- 动态更新
summary文本请用textContent，别替换整个summary元素，否则焦点和语义会丢失
IE 和旧 Edge 完全不支持 toggle 事件，降级方案要提前判断
截至 2026 年，IE 仍无任何 toggle 支持；Edge 12–18 有 details 但无事件。如果你的项目还要求兼容这些环境，不能只靠特性检测 'toggle' in document.createElement('details') —— 这在旧 Edge 返回 true，但实际不触发。
更稳妥的运行时检测方式：
const d = document.createElement('details'); d.innerHTML = '<summary>x</summary>y'; const supportsToggle = 'ontoggle' in d;- 若不支持，需 fallback：给
summary绑定click，再配合 JS 控制open属性，并手动模拟状态同步 - polyfill（如
details-polyfill）可补全行为，但要注意它通常不修复toggle事件，而是提供自定义事件名（如detoggle） - 现代项目中，建议用
@supports (display: details)CSS 规则做样式降级，JS 层直接放弃支持旧引擎
细节容易被忽略：动态渲染时，summary 必须是 details 的第一个子节点，哪怕中间夹一个空文本节点（比如模板字符串换行产生的 #text），都会让浏览器拒绝识别其为触发器——Safari 尤其严格。插入后务必检查 DOM 结构。
