toggle事件触发时el.open已是最终值，因其仅在状态切换完成后派发；不能用hasAttribute('open')判断实时状态，因它只反映HTML源码而非实际渲染状态。
toggle事件里读el.open为什么总是对的
因为toggle事件只在状态切换完成之后派发，此时el.open已同步更新为最终值。你不需要缓存旧值、也不用比对e.target.open和之前的状态——它就是当前真实状态。
常见错误是误以为事件触发时状态“正在变”，于是加延时或requestAnimationFrame再读，结果反而读到中间态或错过时机。实际上：
✅ 用户点一下<summary></summary> → 浏览器立刻更新el.open → 立即派发toggle事件 → 此时el.open就是新值
❌ 不要在事件回调里再查getAttribute('open')——它可能还没同步（尤其 SSR 场景）
为什么不能用el.hasAttribute('open')判断当前展开状态
el.hasAttribute('open')只反映 HTML 源码里有没有写这个属性，和实际渲染状态无关。JS 执行el.open = true后，hasAttribute仍返回false；而服务端渲染带open属性的 HTML，加载后el.open是true，但hasAttribute是true——两者根本不同步。
持久化场景下尤其危险：
• 用hasAttribute存 localStorage → 页面刷新后还原用setAttribute → 可能覆盖 JS 动态设置的逻辑
• 用el.open读取 + toggleAttribute设置 → 才能保证 DOM 属性和 JS 状态一致
• 唯一适合hasAttribute的地方：初始化阶段判断“HTML 是否自带 open”用于降级处理
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
toggle事件不触发的三种真实情况
不是代码写错了，而是触发条件没满足：
- JS 直接赋值
el.open = true—— 这不会触发toggle，它是纯程序控制 - 用户点击了
<summary></summary>以外的区域（比如内容区里的按钮）——toggle只响应<summary></summary>的原生交互 - 浏览器不支持：IE 全系、Safari 'toggle' in Event或
typeof details.addEventListener === 'function'
别写ontoggle内联处理器，也别指望它冒泡。委托监听必须手动绑定到每个<details></details>上。
多面板手风琴效果中toggle事件的同步陷阱
手风琴要求“开一个、关其他”，但toggle事件本身不提供动画进度信息，也不阻塞后续操作。如果在 A 面板的toggle回调里立刻elB.open = false，B 面板会跳变收起，没有过渡动画。
正确做法分两步：
• 当前面板展开时，先等它的max-height动画完成（用getComputedStyle查或transitionend，但注意该事件不保证收起完成）
• 更稳妥的是：所有面板共用一个状态管理函数，统一用requestAnimationFrame节流 + 缓存scrollHeight，避免每次 toggle 都重排
最容易被忽略的是：页面刚加载时从 localStorage 还原状态，必须在toggle监听器注册**之前**完成，否则还原操作会绕过事件监听，导致状态和 UI 脱节。
