<details>标签中<summary>必须是其第一个直接子元素，否则无法触发展开收起；应使用toggle事件监听状态变化，而非click；默认展开用open属性，样式定制需注意浏览器兼容性。
details 标签必须包裹 summary 才能展开收起
单独写 <summary> 不会生效，它只是 <details> 的第一个子元素，且浏览器只识别其作为触发器。如果 <summary> 前面有其他内容（比如空格、换行或文本节点），<details> 会忽略它，导致点击无反应或控制逻辑错乱。
- ✅ 正确结构：
<details> <summary>点击展开</summary> <p>这里是隐藏内容</p> </details>
- ❌ 错误写法：
<details> <p>一段说明</p> <summary>点击展开</summary> <p>隐藏内容</p> </details>
（此时<summary>不被识别为控制节点） - ⚠️ 注意：Chrome/Firefox/Safari 都要求
<summary>是<details>的**直接子元素**且**排第一**；哪怕加个<!-- 注释 -->在它前面也会失效
summary 默认带箭头，但不能用 CSS 伪元素覆盖所有场景
浏览器对 <summary> 内置了 ::marker（显示折叠/展开箭头），但它的渲染行为不统一：Firefox 支持 list-style: none 和 ::marker 控制，Chrome 目前仅部分支持 ::marker，Safari 则基本忽略样式修改。强行用 text-indent 或 padding-left 掩盖箭头容易导致点击热区偏移。
- 稳妥做法是用
display: flex+justify-content: space-between把文字和自定义图标分开布局 - 若需完全隐藏原生箭头，推荐：
summary { list-style: none; } summary::marker { content: ""; }（注意 Safari 16.4+ 才支持::marker，旧版需 JS 检测降级） - 图标建议用 SVG 内联或
background-image，避免字体图标在缩放时模糊或错位
details 元素默认 open 状态与 JS 控制的兼容性问题
open 属性是布尔属性，写上即生效（如 <details open>），但它和 JS 的 details.open = true/false 并非完全同步——比如通过 JS 设置后，再手动点击 summary，某些版本 Safari 会重置状态异常；另外，服务端渲染时若初始设 open，但 JS 后续又调用 details.toggle()，可能触发两次事件。
- 监听状态变化请用
toggle事件（不是click）：details.addEventListener('toggle', () => { console.log('当前状态：', details.open); }); - 避免混用 HTML 属性和 JS 赋值：要么全靠属性控制（适合静态内容），要么全由 JS 管理（适合动态交互）
- 需要“默认展开但可关闭”时，用
<details open>即可；需要“默认关闭但首次加载后自动展开”，请在DOMContentLoaded后执行details.open = true，并确保没重复触发
无障碍访问（a11y）必须保留 summary 的语义和键盘支持
<summary> 天然支持键盘操作（空格/回车触发展开），但若用 div + JS 模拟，就得手动补 role="button"、tabindex="0"、aria-expanded 等，成本高且易出错。原生 <details>/<summary> 是 WAI-ARIA 推荐的轻量级折叠组件，屏幕阅读器能正确播报状态变化。
立即学习“前端免费学习笔记（深入）”；
- 不要给
<summary>加onclick或addEventListener('click')—— 它已有完整交互逻辑 - summary 文本需准确描述内容类型，例如“配置选项（3 项）”比“点我”更利于理解
- 若内部含表单控件（如
<input>），确保details展开后再聚焦，否则 Chrome 可能跳过未渲染的控件
细节在于 <summary> 必须是 <details> 的第一个子节点，以及 toggle 事件才是状态变更的唯一可信信源。其他所有样式或 JS 干预，都该以不破坏这个前提为底线。
