details标签支持内联样式和事件绑定，但原生行为会干扰：onclick触发两次、display/float导致失效；禁用切换需js拦截toggle事件或pointer-events:none；不参与表单提交，兼容性方面ie全系不支持。
details 标签不支持内联样式或 JavaScript 事件绑定？
不是不支持，而是默认行为会干扰常见操作。比如直接给 <details></details> 加 onclick，点击 <summary></summary> 时会触发两次：一次是原生展开/收起，一次是你绑的事件。更麻烦的是，display: inline 或 float 会让它失效——<details></details> 是块级元素，且依赖浏览器内置的折叠逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 需要自定义点击行为时，用
event.target === event.currentTarget判断是否点在 summary 外围区域 - 想改箭头图标？别动
summary::marker（部分浏览器不支持），改用summary::before+details[open]切换 content - 避免对
<details></details>设置height、overflow或transform，否则动画卡顿或内容被裁剪
如何让 details 默认展开且禁用用户切换？
加 open 属性即可默认展开，但“禁用切换”没有原生属性——浏览器不提供 disabled 或 readonly。强行禁用得靠 JS 拦截，但要注意副作用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 仅视觉上禁用：加
pointer-events: none到<summary></summary>，同时设tabindex="-1"防键盘触发 - 真禁用交互：监听
toggle事件，调用event.preventDefault()，但需注意 Safari 旧版本不支持该事件 - 服务端渲染时别只靠
open控制状态，JS 脚本可能晚于 DOM 渲染，导致闪动；优先用 CSSdetails:not([open]) > *:not(summary)隐藏内容
details + summary 在表单中提交时会不会传值？
不会。<details></details> 和 <summary></summary> 都是非表单控件，不参与表单序列化，FormData 或 form.submit() 完全忽略它们。
常见错误现象：
- 把
<input>套在<details></details>里，误以为折叠状态会影响提交——其实只影响显示，input 本身照常提交 - 用
<details></details>包裹<select></select>后发现下拉菜单被遮挡——因为<details></details>的overflow: hidden默认行为会裁剪绝对定位子元素 - 想用它做“条件字段组”，结果后端收不到开关状态——得额外加一个隐藏
<input type="hidden">同步 open 状态
兼容性差到不能用？哪些场景必须避开？
IE 全系不支持，Edge 12–18 支持但有 bug（比如 toggle 事件不触发）。不过只要不依赖 JS 事件或复杂样式，基础展开/收起在 Chrome/Firefox/Safari/Edge 79+ 都稳。
必须避开的场景：
- 需要支持 IE11 或旧版微信内置浏览器（X5 内核 v3.4 以下）
- 内容含 Canvas/WebGL 动画，且折叠时未手动
cancelAnimationFrame，展开后动画错乱 - 嵌套多层
<details></details>且每层都带大量 DOM，Safari 会明显卡顿（v16.4 已修复部分，但低端 iOS 仍慢）
语义化确实干净，但别为了“用 HTML5 标签”硬套。如果核心交互依赖动态状态同步、频繁 JS 控制，不如用 div + ARIA + 手动 class 切换更可控。
