直接修改details.open = true/false不触发视觉更新，必须用setAttribute('open', '')或removeAttribute('open')；监听用toggle事件，判断状态用hasAttribute('open')，IE等旧浏览器需降级为div+button模拟。
details元素的open属性怎么手动控制开合
直接改open布尔属性就能控制，但必须用setAttribute或removeAttribute，不能只赋值details.open = true——后者在多数浏览器里不触发视觉更新。
常见错误是写成：el.open = !el.open，看起来逻辑对，实际页面没反应。因为open这个JS属性只是反映初始状态，不是响应式绑定。
- 打开菜单：
details.setAttribute('open', '')（值可以是任意非空字符串，习惯用空字符串） - 关闭菜单：
details.removeAttribute('open') - 判断当前是否展开：
details.hasAttribute('open')，别用details.open
用JavaScript监听details的展开/收起事件
details原生支持toggle事件，它在用户点击标题栏、或脚本修改open属性后触发，且保证发生在DOM更新之后。
别用click或change事件替代——click捕获不到键盘操作（如空格键触发），change根本不触发。
立即学习“Java免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
details.addEventListener('toggle', () => {
if (details.hasAttribute('open')) {
console.log('已展开');
} else {
console.log('已收起');
}
});
兼容性差时怎么降级处理（IE / 旧版 Safari）
details在IE全系、Safari ≤ 11.1 中完全不支持，连document.createElement('details')返回的也是HTMLUnknownElement。检测方式不是看标签名，而是：'open' in document.createElement('details')。
如果需要支持这些环境，得手写div+button模拟，同时注意两点：
- 手动管理
aria-expanded和aria-hidden属性，否则屏幕阅读器无法识别状态 - 用
max-height过渡动画代替display: none切换，否则CSS动画失效 - 键盘支持不能少：
Enter和Space都要触发切换
为什么不要在details内部用display: none强制隐藏内容
即使details没加open属性，其slot="default"里的内容仍是可访问、可聚焦、可被屏幕阅读器读出的。如果用display: none套在summary后的子元素上，会破坏语义结构，导致辅助技术跳过这部分内容。
正确做法只有两个：
- 让内容自然随
open属性显示/隐藏（默认行为） - 若真要隐藏某段，用
hidden属性，它和open逻辑正交，且保持可访问性
最易被忽略的是：很多人给details加role="group"或aria-controls，其实完全多余——原生details已内置完整ARIA语义，加了反而可能干扰。
