<details>的open属性是反映初始状态的反射属性，无法直接赋值控制开关，应使用toggleAttribute('open')；需用::marker或::after自定义图标；多<details>联动须监听toggle事件并手动处理兄弟节点。
直接用 <details> 和 <summary> 就能实现原生、无障碍、无需 JS 的折叠菜单，但默认样式简陋、展开状态难控制、嵌套或自定义交互时容易翻车。
为什么<details>的open属性不能靠JS反复切换
很多人写 element.open = true 后再设 false 发现没反应——这是因为 open 是**反映元素初始状态的属性（reflected attribute）**，不是实时控制开关的“开关量”。真正触发收起/展开的是用户点击 <summary>，或调用 element.toggleAttribute('open')。
- ✅ 正确切换方式：
detailsEl.toggleAttribute('open'); - ❌ 无效写法：
detailsEl.open = false; // 不会触发UI变化
- ⚠️ 注意：直接操作
open属性只影响初始渲染，后续需用toggleAttribute或removeAttribute('open')配合事件监听
怎么让<summary>不显示默认箭头并加自定义图标
浏览器对 <summary> 的 ::marker 伪元素支持不一（Chrome/Firefox 支持，Safari 目前不支持），纯 CSS 隐藏+替换最稳。
- 先清除原生标记：
summary::marker { content: ''; } - 再用伪元素加图标（推荐 SVG 内联，避免字体图标兼容问题）：
summary::after { content: '▶'; transform: rotate(0deg); transition: transform 0.2s; } details[open] > summary::after { transform: rotate(90deg); } - ⚠️ Safari 中
::marker无效，必须依赖::before/::after；若用字体图标（如 Font Awesome），要确保font-display: optional避免 FOIT
多个<details>联动：点击一个展开时自动收起其他
原生不支持手风琴效果，得用 JS 监听 toggle 事件并手动处理兄弟节点。
立即学习“前端免费学习笔记（深入）”；
- 监听所有
<details>的toggle事件（注意：该事件在展开/收起后触发，不是点击瞬间）：document.querySelectorAll('details').forEach(details => { details.addEventListener('toggle', () => { if (details.open) { document.querySelectorAll('details').forEach(d => { if (d !== details) d.removeAttribute('open'); }); } }); }); - ⚠️ 关键点：不能在
click上做，因为<summary>点击行为由浏览器接管，click事件可能早于状态更新；toggle才是状态落地后的可靠时机 - 性能提示：如果列表很长（>50 项），建议用事件委托，但需注意
<details>不冒泡toggle事件，只能逐个绑定
细节上最常被忽略的是：Safari 对 toggle 事件的支持从 iOS 16.4 / macOS 13.3 才开始完整；若需兼容更老版本，得降级为监听 click 并用 setTimeout 延迟判断 open 状态——这时候原生优势就弱了，不如直接上轻量 JS 组件。
