标签中必须是其第一个直接子元素，否则无法触发展开收起；应使用toggle事件监听状态变化，而非click；默认展开用open属性，样式定制需注意浏览器兼容性。
details 标签必须包裹 summary 才能展开收起
单独写
- ✅ 正确结构：
点击展开
这里是隐藏内容
- ❌ 错误写法：
（此时
- ⚠️ 注意：Chrome/Firefox/Safari 都要求
在它前面也会失效
summary 默认带箭头，但不能用 CSS 伪元素覆盖所有场景
浏览器对 ::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 = true/false 并非完全同步——比如通过 JS 设置后，再手动点击 summary，某些版本 Safari 会重置状态异常；另外，服务端渲染时若初始设 open，但 JS 后续又调用 details.toggle()，可能触发两次事件。
- 监听状态变化请用
toggle事件（不是click）：details.addEventListener('toggle', () => { console.log('当前状态：', details.open); }); - 避免混用 HTML 属性和 JS 赋值：要么全靠属性控制（适合静态内容），要么全由 JS 管理（适合动态交互）
- 需要“默认展开但可关闭”时，用
DOMContentLoaded后执行details.open = true，并确保没重复触发
无障碍访问（a11y）必须保留 summary 的语义和键盘支持
div + JS 模拟，就得手动补 role="button"、tabindex="0"、aria-expanded 等，成本高且易出错。原生
- 不要给
onclick或addEventListener('click')—— 它已有完整交互逻辑 - summary 文本需准确描述内容类型，例如“配置选项（3 项）”比“点我”更利于理解
- 若内部含表单控件（如
），确保details展开后再聚焦，否则 Chrome 可能跳过未渲染的控件
细节在于 toggle 事件才是状态变更的唯一可信信源。其他所有样式或 JS 干预，都该以不破坏这个前提为底线。
