details元素不支持多级嵌套折叠，因summary嵌套触发事件冒泡与焦点切换致父级意外关闭；summary内不宜放链接，应移出并定位或用button替代；Safari 15.4前open属性动态更新无效，需检测兼容性并降级；移动端需防触摸穿透，加touch-action及收起延迟。
details元素默认不支持多级嵌套折叠
直接在 <details></details> 的 <summary></summary> 里再放一个 <details></details>，点击子菜单时父级会意外关闭——这是浏览器原生行为，不是 bug。因为 <summary></summary> 是可聚焦、可点击的交互元素，嵌套后事件冒泡+焦点切换触发了父 <details></details> 的 toggle。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 CSS 隐藏父级
<summary></summary>的默认箭头（list-style: none+ 自定义伪元素），改用 JS 控制展开状态，避免依赖原生 toggle - 把子菜单放在父
<details></details>的<div> 内，但用 <code>display: block+max-height动画模拟折叠，不嵌套<details></details> - 如果坚持用纯 HTML，只能做单层：每个
<details></details>独立，靠 CSS 定位实现视觉上的“嵌套感”，但逻辑上无父子联动 - 不要在
<summary></summary>里直接写<a href="..."></a>；把它移出来，作为同级兄弟元素，用 CSS 绝对定位覆盖在 summary 可视区域上 - 给
<summary></summary>加tabindex="0"并监听keydown（Enter/Space），手动触发<details></details>的toggle() - 若 summary 内必须有操作按钮（如“更多”），用
<button type="button"></button>替代<a></a>，并加aria-expanded同步状态 - 检测浏览器是否支持：用
"open" in document.createElement("details")判断，不支持就 fallback 到 class 切换 + CSSmax-height动画 - 强制重绘：设置
open后，加一句el.offsetHeight触发 layout，再设open = true（部分老版本需要） - 服务端渲染时，如果初始状态为展开，别只靠
open属性，同时加class="is-open"和对应 CSS 规则，确保降级可用 - 给
<details></details>外层容器加touch-action: manipulation，减少延迟和误判 - 禁用
<summary></summary>的默认高亮：用-webkit-tap-highlight-color: transparent - 收起时加 100ms 延迟再允许下一次 toggle，防止连点抖动：
setTimeout(() => { detailsEl.open = false }, 100)
summary点击区域太小且无法键盘聚焦到内部链接
<summary></summary> 默认只包裹文字，里面放 <a></a> 标签后，键盘 Tab 到该 <summary></summary> 时焦点停在 summary 元素本身，按回车不会触发链接跳转，用户必须再按一次 Tab 才能进到链接——对无障碍访问很不友好。
实操建议：
立即学习“前端免费学习笔记（深入）”；
details在 Safari 15.4 之前不支持 open 属性的动态更新
比如用 JS 设置 el.open = true，在旧版 Safari 中无效，DOM 上属性写了，但视觉不展开。这是已知兼容性坑，不是代码写错。
实操建议：
立即学习“前端免费学习笔记（深入）”；
移动端触摸穿透导致意外收起
在 iOS Safari 中，快速连续点击两个相邻的 <details></details>，第二个可能没反应，或者点完第一个后页面轻微滚动，导致手指实际点到了空白处，触发了自动收起。
实操建议：
立即学习“前端免费学习笔记（深入）”；
