Safari中details嵌套超两层时toggle事件不可靠，需限制为两层或动态渲染第三层；summary必须是details首个直接子元素；微信X5内核不支持details，须UA检测降级为手风琴组件。

details嵌套超过2层在Safari中toggle事件不可靠

iOS Safari（含17.4）对三层及以上details嵌套的toggle事件支持不一致：点开第三级时，第二级可能意外收起，或toggle根本没触发。这不是代码写错，是WebKit引擎至今未完全实现多层状态同步。

实操建议：

• 最多用两层嵌套，第三级改用display: none + JS控制显隐（但需手动补aria-expanded）
• 若必须三层，确保第三层details只在第二层open为true时才渲染到DOM中（用document.createElement动态插入，而非初始HTML里硬写）
• 不要监听click去模拟展开——toggle事件才是唯一能准确反映用户意图的钩子

summary必须是details的第一个直接子元素，否则点击失效

把summary包在p、div甚至span里，Safari和旧版Chrome会直接忽略其交互逻辑，表现为“点了没反应”，控制台也无报错。

常见错误结构：

立即学习“前端免费学习笔记（深入）”；

<details>
  <p><summary>标题</summary></p>
  <p>内容</p>
</details>

正确写法（且仅此一种）：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

<details>
  <summary>标题</summary>
  <p>内容</p>
</details>

注意：summary必须是details的**首个直接子节点**，中间不能插任何其他元素（包括空格换行产生的文本节点，在严格模式下也可能干扰）。

嵌套details放在

里会导致提交时带空值

旧版Safari和EdgeHTML曾把summary误识别为表单控件，即使它没有name属性，提交时也会附上summary=这样的空参数。这不是规范行为，但真实存在。

规避方式：

• 整个导航树别塞进<form>标签内；如需表单功能，把details放在form外部，用form属性指向对应form ID
• 如果结构上无法分离，给每个summary加disabled属性（虽不语义，但可阻断误提交）
• 服务端接收时过滤掉键名为summary或空值的字段，别依赖前端校验

移动端微信X5内核根本不解析details标签

微信Android版（尤其v8.0.4x及更早）的X5内核压根不识别details，整段HTML被当作文本渲染，菜单区域空白。这不是兼容性问题，是功能缺失。

必须降级处理：

• 用UA检测navigator.userAgent.includes('MicroMessenger')或/iPhone OS \d+.*like Mac OS/.test(navigator.userAgent)
• 降级结构用<div class="accordion-item"><button aria-expanded="false"></button><div class="accordion-content"></div>
• button必须带role="button"和tabindex="0"，否则NVDA/JAWS读作“未命名按钮”
• 千万别在summary里放<img>或<svg>——微信会劫持点击事件，导致整个折叠失效

最易被忽略的一点：嵌套层级本身不是问题，问题是各浏览器对「同一DOM节点上多个open属性如何共存」没有统一解释。你写的HTML再合法，WebKit和Blink也可能按不同规则执行——所以永远用JS监听toggle并手动同步状态，别信默认行为。