和是html5原生折叠组件，无需js即可实现语义化、可访问的展开/收起；open为布尔属性，存在即默认展开，不可赋值如open="true"；必须为首个子元素，箭头推荐用::before自定义；ie不支持需降级处理。
<details></details> 和 <summary></summary> 是 HTML5 原生支持的折叠组件，不依赖 JS 就能实现展开/收起，语义正确、键盘可操作、屏幕阅读器友好 —— 但直接写就用，容易在样式、表单行为和兼容性上翻车。
怎么让<details></details>默认展开
加 open 布尔属性即可，不需要赋值：<details open><summary>标题</summary>内容</details>。注意这不是 open="true"，写成字符串值反而可能被当成 false（部分旧解析器会这样处理）。如果要用 JS 控制，改 element.open = true 或 element.setAttribute('open', '')，别碰 style.display —— 那会破坏可访问性。
为什么<summary></summary>点击没反应或箭头不显示
常见原因有三个：
-
<summary></summary>必须是<details></details>的**第一个子元素**，否则浏览器可能忽略它，回退到自动生成“详细信息”文本 - Safari 对
<summary></summary>内部空白或内联元素（如<span></span>）的点击热区识别较弱，建议给<summary></summary>加cursor: pointer和最小高度（比如min-height: 1.5em） - 箭头图标由
::marker渲染，但 Safari 仅认::-webkit-details-marker，Firefox 用::-moz-list-bullet；最稳方案是统一用summary::before自定义图标，并加content: ""+display: inline-block
折叠区域里的<input>还会提交吗
会。哪怕视觉上收起来了，只要没加 disabled 或 hidden 属性，所有表单控件仍参与提交。这是最容易被忽略的业务逻辑陷阱：
- 如果“收起 = 不提交”，必须用 JS 动态设
input.disabled = true（并在toggle事件中同步更新） - 如果服务端能安全忽略空值或未传字段，那前端可不做干预 —— 但得确认后端契约
- 不要用
display: none隐藏整个<details></details>，这会让内容不可访问；改用hidden属性或visibility: hidden
IE 和老 Edge 怎么办
IE 完全不支持 <details></details>，Edge 12–18 虽支持但无动画、toggle 事件不可靠。如果你的项目还要求兼容这些环境：
- 不要指望 polyfill（如
details-polyfill）能完美模拟语义和无障碍行为，它们通常 fallback 到 JS 控制display，会丢失原生优势 - 更务实的做法是：检测
'open' in document.createElement('details')，不支持时降级为手写 JS 折叠逻辑 + ARIA 属性（aria-expanded、aria-controls） - 真正麻烦的不是功能缺失，而是团队误以为“写了
open就等于所有用户都看到默认展开”—— 这种假设在跨浏览器测试里几乎必然出错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
