details元素的open属性是可读写的布尔值，直接赋值true/false即可控制展开/收起；应避免使用setAttribute/removeAttribute，监听toggle事件比click更可靠，多实例需统一状态管理，移动端需扩大summary点击热区。
details元素的open属性是可读写的布尔值
直接操作 details 元素的 open 属性就能控制展开/收起状态，不需要触发事件或模拟点击。这个属性和 DOM 元素的其他布尔属性（比如 disabled）行为一致：设为 true 就展开，false 就收起。
常见错误是试图用 setAttribute('open', '') 或 removeAttribute('open') —— 这样做虽然视觉上可能生效，但会破坏属性与属性值的同步关系，后续读取 element.open 可能返回意外结果（比如始终为 false）。
- ✅ 正确写法：
el.open = true或el.open = false - ❌ 避免写法：
el.setAttribute('open', 'open')、el.removeAttribute('open') - 注意：初始未设置
open属性时，el.open读出来是false，不是undefined
监听details的toggle事件比监听click更可靠
用户点击 summary 或按空格/回车触发展开/收起时，浏览器会派发 toggle 事件，它只在状态实际切换后触发，且保证 event.target.open 已更新。相比监听 click，它不会误判点击非 summary 区域、键盘焦点丢失等边界情况。
一个典型陷阱是：在 click 回调里立刻读 details.open，但此时 DOM 还没完成更新，读到的仍是旧值。
立即学习“前端免费学习笔记（深入）”；
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
-
toggle事件不冒泡，需直接绑定在details上 - 兼容性没问题：Chrome 12+、Firefox 49+、Safari 6+、Edge 79+ 均支持
- 示例：
details.addEventListener('toggle', () => { console.log('当前状态：', details.open); });
用JS控制多个details时注意避免状态竞争
如果页面有多个 details，且业务逻辑要求“只允许一个打开”（手风琴效果），不能只靠 click 或 toggle 事件去逐个关闭其他项——因为多个事件可能并发触发，导致状态错乱。
更稳妥的做法是：统一用一个函数管理所有 details 的状态，并在每次操作前先归一化（全部关掉），再打开目标项。同时确保该函数是幂等的，重复调用不会引发异常。
- 推荐用
document.querySelectorAll('details')获取全部实例，缓存引用，避免反复查询 - 不要用
forEach+ 异步操作（如setTimeout）来延迟关闭，这会引入竞态 - 若需动画过渡，应监听
transitionend而非依赖 JS 手动延时
移动端 Safari 中 summary 点击区域小，需要显式扩大
iOS Safari 对 summary 的默认点击热区非常窄（仅文字区域），用户容易点不中，导致 toggle 不触发。这不是 JS 问题，而是 CSS 渲染限制。
解决方式是给 summary 加上 display: block 和足够的内边距，同时确保父级 details 没有 overflow: hidden 截断热区。
- 最小安全样式：
summary { display: block; padding: 12px; margin: -12px; } - 避免对
summary使用pointer-events: none或透明度影响点击穿透 - 真机测试比模拟器更可靠，尤其 iOS 15+ 对 pointer events 的处理有细微差异
open 属性，而不是绕路操作 DOM 属性或模拟用户行为；真正容易被忽略的是移动端热区和多实例状态同步这两个点，它们往往在线上环境才暴露。 
