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>

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

HTML汇报生成器

🚀 不用写一行代码！把项目总结、工作汇报、研究报告、技术文档、提案、数据看板直接变精美HTML。12种主题 × 11种背景动效 × 9种鼠标特效 × 10种边框样式 × 实时调色器 × 毛玻璃卡片 × PDF导出，生成后还能自由调色，零门槛AI直出。触发词：项目总结、工作汇报、PPT、生成报告、做个总结、HTML文档、数据报告、流程文档、会议纪要、技术文档、研究报告、数据看板、提案、做个展示页、帮我做个汇报、文档生成。

下载

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

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

嵌套details放在

里会导致提交时带空值

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

规避方式：

• 整个导航树别塞进<form></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> <li> <code>button必须带role="button"和tabindex="0"，否则NVDA/JAWS读作“未命名按钮”
• 千万别在summary里放<img>或<svg></svg>——微信会劫持点击事件，导致整个折叠失效

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