summary必须是details的首个子元素，否则Safari和旧版Chrome会失效；open是布尔属性，仅存在即生效；summary内禁用img/svg；details不参与表单提交，需手动同步open状态。
summary 必须是 details 的首个子元素，否则点击失效
这是最常被忽略的硬性结构约束——不是“建议”，而是浏览器解析时的强制规则。DOM 树里只要 summary 前面有任意文本节点（空格、换行、注释）或其它元素，Safari 和旧版 Chrome 就会直接放弃绑定点击逻辑，表现为“点了没反应”，控制台也无报错。
常见错误写法包括：
-
<details><div><summary>标题</summary></div><p>内容</p></details>（summary被div包裹，不再是直接子元素） -
<details><!-- 注释 --><summary>标题</summary></details>（注释是文本节点，排在summary前） -
<details><p>内容</p><summary>标题</summary></details>（summary不是首个子元素）
正确写法只有一种：<details><summary>标题</summary><p>内容</p></details>，中间不能有任何干扰节点。
open 是布尔属性，不是字符串值，JS 控制要区分属性与属性值
open 属性的存在与否决定展开状态，不是靠它的值。写成 open="false" 或 open="true" 都无效；只有 <details open> 才表示默认展开。
立即学习“前端免费学习笔记（深入）”；
JS 操作时容易混淆：
- 设置状态：用
el.open = true或el.toggleAttribute('open')，不要用el.setAttribute('open', '')（虽能生效，但冗余） - 检测状态：优先用
el.hasAttribute('open')，而不是读el.open（后者始终返回布尔值，但渲染只认属性是否存在） - iOS Safari ≤15.4 有个坑：页面加载后 JS 设
el.open = false可能视觉不更新，需加el.offsetHeight强制回流
summary 里别塞 img/svg，热区可能失效
原生 summary 的点击热区依赖浏览器对纯文本容器的默认处理。一旦里面嵌了 <img> 或 <svg>，某些 iOS Safari 版本（尤其是 ≤15.4）会完全无法触发 toggle 行为。
安全做法是：
- 用
summary::before添加图标，summary本身只放纯文本或语义化内联标签（如<strong>） - 若必须内嵌图标：给图标加
pointer-events: none，并确保summary是display: inline-flex或display: flex - 避免
float、display: inline-block，它们会破坏热区尺寸计算
details 不参与表单提交，状态需手动同步到隐藏字段
details 是展示容器，不是表单控件。即使里面包着 <input name="opt">，折叠/展开状态也不会随 form.submit() 或 FormData 一起提交。
常见误区是以为 <details open><input name="opt"></details> 提交时能反映“是否展开”——实际只会提交 input 值，open 状态完全丢失。
解决方案只有一条：在 toggle 事件中手动更新隐藏字段：
<details> <summary>高级选项</summary> <input name="advanced_value" value="123"> <input type="hidden" name="advanced_open" value="false"> </details>
然后监听：
details.addEventListener('toggle', () => {
const hidden = details.querySelector('input[type="hidden"]');
hidden.value = details.hasAttribute('open') ? 'true' : 'false';
});真正难搞的不是写法，而是 DOM 结构那一毫米的偏差——它藏在空格和换行里，看不见，却让整个交互瘫痪。
