details标签原生支持无js折叠展开，核心要求是summary必须为details的第一个子元素且结构合法；open为布尔属性，仅存在即默认展开，错误写法如open="true"反而强制展开。
details 标签本身就能实现无 JS 折叠展开，不需要任何 JavaScript。它不是“需要配置才能用”的功能，而是浏览器原生行为——只要结构写对，点击 summary 就自动切换状态。
为什么summary点了没反应？
最常见原因是结构不合法：summary 不是 details 的第一个子元素。浏览器会直接忽略交互逻辑，甚至渲染出默认文字“详细信息”。
-
summary必须紧贴details开始标签后，中间不能有空格、注释或文本节点 - 不要写成
<details><div><summary>标题</summary></div>...</details>—— 这会让summary失去绑定 - Safari 对
summary内部含<span></span>或<strong></strong>等内联元素的热区识别较弱，建议加cursor: pointer和min-height: 1.5em
open 属性怎么写才有效？
open 是布尔属性，只认“是否存在”，不解析值。写错会导致默认状态失效，甚至在部分旧解析器中被当成 false。
- ✅ 正确：
<details open><summary>标题</summary>内容</details> - ❌ 错误：
<details open="true"></details>、<details :open="true"></details>（Vue 模板语法混入）、<details open=""></details>（虽能工作但冗余） - 服务端渲染时，是否加
open就决定首屏状态；JS 动态控制请用el.open = true或el.setAttribute('open', '')，别设字符串值
怎么自定义箭头又不破坏可访问性？
浏览器用 ::marker 渲染原生箭头，但 Safari 对 summary::marker 支持极差，Firefox 又只认 ::-moz-list-bullet。硬改 ::marker 容易漏掉某一个浏览器。
- 统一用
summary::before：先清空原生样式summary { list-style: none; }，再用伪元素补图标 - 旋转动画可加
transition: transform 0.2s，但仅限旋转；高度滑动仍需 JS 配合max-height - 别用
appearance: none或position: absolute覆盖summary，这会破坏焦点热区和屏幕阅读器识别
折叠区域里有表单控件，提交时会带上吗？
会。视觉收起 ≠ 逻辑禁用。details 不改变子元素的表单参与性，所有 <input>、<select></select> 默认都会随表单提交。
- 如果“收起 = 不提交”，必须手动设
input.disabled = true，并在toggle事件中同步更新 - 若后端能安全忽略空值或未传字段，前端可不做干预——但得确认契约，不能假设“看不见就不会传”
- 绝对不要用
display: none隐藏整个details，这会让内容不可访问；改用hidden属性或visibility: hidden
真正容易被忽略的，是团队在跨浏览器测试前就默认“写了 open 就所有用户看到展开”。IE 完全不支持，Edge 12–18 虽支持但 toggle 事件不可靠，Safari 对嵌套 details 的处理也常出问题。兼容性检测比样式调试更值得前置做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
