details元素默认收起，添加open布尔属性可使其初始展开；JavaScript中应使用el.open = true/false或toggleAttribute()控制状态，避免字符串赋值。
details元素默认不展开，open属性控制初始状态
HTML <details> 默认是收起的，想让它一加载就展开，得加 open 这个布尔属性。它不是写成 open="true" 或 open="open"，而是直接写 open 就行——有这个属性就展开，没这个属性就不展开。
常见错误是把它当字符串属性用，比如 open="true"，这样浏览器会当成 open="" 处理（依然生效），但语义不对，也容易和 JS 的 element.open = true 混淆。
-
<details open><summary>标题</summary>内容</details>—— 正确写法 -
<details open="open">...—— 不推荐，冗余且易误解 -
<details open="true">...—— 语法合法但不符合规范，建议避免
JS动态控制open状态，别直接赋值字符串
用 JavaScript 切换折叠状态时，操作的是 DOM 元素的 open 属性，它是布尔值，不是字符串。直接写 el.open = "true" 或 el.open = "false" 会出问题：字符串非空即为真，所以 "false" 也会让面板展开。
正确做法是用布尔值或 toggleAttribute()：
立即学习“前端免费学习笔记（深入）”；
-
el.open = true或el.open = false—— 最直白 -
el.toggleAttribute('open')—— 切换有无该属性，更贴近 HTML 行为 -
el.setAttribute('open', '')和el.removeAttribute('open')也行，但不如布尔赋值简洁
注意：设置 el.open = false 后，<details> 标签上不会自动移除 open 属性（除非你手动 remove），但 DOM 属性值已为 false，视觉和行为都按收起处理。
summary里放什么内容？别塞块级元素或交互控件
<summary> 是 <details> 的唯一可点击区域，负责触发展开/收起。它默认是 inline 元素，如果在里面放 <div>、<p> 或按钮，可能破坏点击区域或导致样式错乱。
- 允许内联内容：
<strong>、<span>、文字、图标（用<svg>或伪元素） - 避免块级标签：
<div>、<p>、<h3>等，否则可能撑开高度、影响点击热区 - 慎用
<button>：自带 click 阻止冒泡，会干扰<details>自身的展开逻辑
如果需要图标指示状态，推荐用 CSS 的 ::before 或 ::after + details[open] summary::after 控制，比在 HTML 里硬塞更可控。
兼容性和无障碍注意事项
<details> 在现代浏览器中支持良好（Chrome 12+、Firefox 49+、Safari 6.2+），但 IE 完全不支持。如果需兼容旧环境，得用 JS 手动模拟，不能只靠原生标签。
无障碍方面，原生 <details> 已自带 ARIA 属性（如 aria-expanded），但前提是 <summary> 是它的第一个子元素，且没被其他元素包裹。常见坑：
- 把
<summary>包在<div>里 → 屏幕阅读器无法识别折叠关系 - 多个
<summary>—— 只有第一个生效，其余被忽略 - 没写
<summary>→ 浏览器会自动生成一个“Details”文本，但不可定制，也不利于语义化
移动端要注意：iOS Safari 对 <details> 的 touch 响应有时有轻微延迟，若对点击反馈要求高，可加 cursor: pointer 和 user-select: none 微调体验。
