HTML手风琴默认展开第一项需在首个<details>标签上添加open布尔属性，如<details open><summary>标题</summary><p>内容</p></details>，其余项不加该属性；open必须作用于<details>而非<summary>，且推荐直接写open而非open=""或open="open"。
HTML手风琴默认展开第一项怎么写
直接加 checked 属性不行，因为原生 HTML 手风琴（<details>）默认是收起的，要让它展开，得用 open 属性 —— 这是唯一合法、有效的控制方式。
<details> 里加 open 就完事了？
是的，但要注意位置和语义：
-
open是布尔属性，写上就生效，不需要赋值（open=""或open="open"都行，但推荐只写open） - 必须加在
<details>标签上，不能加在<summary>上 - 多个
<details>中，只给第一个加open，其他不加，就能实现“仅第一项默认展开”
<details open> <summary>常见问题 1</summary> <p>这是第一项内容，加载时就可见。</p> </details> <details> <summary>常见问题 2</summary> <p>这项默认收起，点击才展开。</p> </details>
用 JavaScript 动态控制 open 容易踩什么坑
多数人想“等页面加载完再展开”，结果用 document.querySelector('details').open = true 失败 —— 因为 DOM 已渲染，但浏览器可能已按初始 HTML 状态完成布局，强制赋值有时不触发重绘。
- 最稳妥的是：服务端或构建时直接写死
open属性，避免 JS 干预 - 如果必须用 JS（比如 CMS 输出无权改 HTML），得在
DOMContentLoaded后立即操作，并确保选中的是第一个<details> - 别用
setAttribute('open', '')，虽然能加属性，但部分旧版 Safari 对动态设置open支持不稳定 - 用
element.open = true更可靠，且兼容性更好（Chrome 12+、Firefox 49+、Safari 15.4+）
为什么不用 CSS 或 jQuery 模拟手风琴
除非你明确需要 IE11 兼容或复杂动画，否则没必要。原生 <details> 自带语义、键盘可访问（空格/回车切换）、屏幕阅读器识别，且零 JS 即可用。
立即学习“前端免费学习笔记（深入）”；
- CSS 模拟（比如用
max-height+transition）要自己处理焦点、ARIA 属性、键盘事件，容易漏掉可访问性细节 - jQuery 插件往往体积大、更新慢、与现代框架（如 React/Vue）集成麻烦
-
<details open>在所有现代浏览器中开箱即用，连 SSR 渲染都无需额外逻辑
真正难的不是让第一项展开，而是确认你的内容结构是否真适合用 <details> —— 它只适合“单层折叠/展开”，嵌套或联动展开得另想办法。
