details嵌套不被html5规范支持，导致ios safari点击失效、微信x5内核忽略、状态不同步；必须用js同步open属性或降级为div+button方案。
details 标签原生不支持嵌套，强行写 details 里包 details 会导致状态不同步、iOS Safari 点击失效、微信 X5 内核完全忽略，这不是写法问题，是规范未定义的行为。
为什么 details 嵌套会点不开或自动收起
HTML5 规范没规定嵌套 details 的行为，浏览器实现各自为政：Chrome/Firefox 会丢弃内层 open 属性，Safari（直到 iOS 17.4）存在点击穿透——点二级 summary，一级意外关闭；更隐蔽的是，summary 必须是 details 的**首个子元素**，一旦中间插入另一个 details，外层折叠逻辑就中断。
常见症状包括：
- 点开二级后，一级立刻收起
- 二级
summary点击无响应，控制台也无toggle事件 - Tab 键跳过某级，焦点卡死在空白处
-
details[open] > summary::before只转外层图标，子级图标不动
如果非要用嵌套结构，必须加 JS 同步 open 状态
仅靠 HTML/CSS 无法修复嵌套失效，必须监听 toggle 事件，手动同步子级 open 属性。关键不是“显示/隐藏”，而是保持原生语义和可访问性（如 aria-expanded 自动同步）。
实操要点：
- 给父子
details加统一data-group，比如data-group="nav-1" - 不要用
display: none控制子级显隐，否则toggle事件失效、屏幕阅读器读不出变化 - 在父级
toggle回调中，只设child.open = parent.open，不操作child.style.display - 确保子
details是父summary的**直接兄弟节点**，而非包裹在div或p里（否则 DOM 结构破坏，Safari 直接不认）
最小可行代码片段：
document.querySelectorAll('details[data-group]').forEach(panel => {
panel.addEventListener('toggle', () => {
const group = panel.dataset.group;
document.querySelectorAll(`details[data-group="${group}"]`).forEach(child => {
if (child !== panel) child.open = panel.open;
});
});
});
iOS 和微信内置浏览器必须降级处理
iOS Safari（≤17.4）对嵌套 details 支持极差；微信 Android 版 X5 内核（尤其 v8.0.4x 以下）甚至不解析 details 标签，整个菜单空白。此时不能“修”，只能“换”。
降级策略：
- 用 UA 检测是否为
Micromessenger或iOS，是则渲染div+button+class="is-open"结构 -
button必须带role="button"和动态aria-expanded，否则 NVDA/JAWS 读作“未命名按钮” - 避免在
summary里放img或svg，微信里它们会劫持点击；非要放，得加pointer-events: none - 移动端必须设
touch-action: manipulation，否则 iOS 有 300ms 延迟，且易误触发滚动
真正需要多级独立开关时，别碰嵌套 details
当子菜单要单独展开/收起（非随父级联动）、内容含 video/iframe、或需自定义动画节奏时，原生 details 已无优势。此时应放弃语义妥协，手写结构化方案。
推荐做法：
- 用
div class="accordion-item"包标题与内容，标题用button（非summary）并设tabindex="0" - CSS 控制
max-height过渡，值设为固定大数（如500px），不用auto - JS 中用
el.scrollHeight动态读取内容高度，再赋给style.maxHeight实现精准收放 - 键盘支持：监听
Enter/Space，调用el.classList.toggle('is-open') - 互斥逻辑（手风琴）必须手动加：
document.querySelectorAll('.is-open').forEach(el => el.classList.remove('is-open'))
最易被忽略的一点：嵌套菜单的焦点管理无法靠原生 details 自动完成。展开后，焦点不会跳进子内容区，屏幕阅读器也感知不到层级变化——这必须用 setTimeout(() => contentEl.focus(), 0) 补足，且要在每次展开后都执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
