details 标签是语义化披露组件，非按钮；summary 必须为 details 的首个子元素；用 :open 伪类控制视觉反馈；手风琴等联动需最小化 JS，监听 toggle 事件并操作 open 属性。
details 标签本身不是按钮，但它天然具备可点击触发的交互能力——只要结构正确、不破坏语义，就能做到零 JS 的“声明式控制”。关键不在加功能，而在别乱动它。
为什么不能把 details 当成 button 用
它没有 type 属性，不参与表单提交，也不响应 click 事件（只发 toggle）。强行套用按钮逻辑（比如写 onclick、加 role="button"）反而会干扰原生键盘支持（空格/回车）、屏幕阅读器播报，还可能让 Safari 点击失效。
真正该做的，是接受它的本职：一个语义化的“披露组件”。它的“控制”体现在开闭状态，而不是点击动作本身。
summary 必须是 details 的第一个子元素
这是 Safari 和旧版 Chrome 能否响应点击的硬性门槛。哪怕开头多一个空格、注释或换行，summary 就会失去热区。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
<details><summary>标题</summary><p>内容</p></details> - ❌ 错误：
<details><!-- 注释 --><summary>标题</summary>… - ❌ 错误：
<details><div>多余容器</div><summary>标题</summary>…
检查 DOM 结构时，直接看 details 的 childNodes[0] 是否为 summary 元素，比肉眼更可靠。
用 :open 伪类替代 JS 控制视觉反馈
想让展开时文字变色、图标翻转、背景高亮？别写 JS 切 class，直接用 CSS：
details:open summary {
color: #1e40af;
}
details:open summary::after {
content: "▼";
margin-left: 4px;
}
summary::after {
content: "▶";
margin-left: 4px;
}注意两点：
-
:open是状态选择器，不是动画钩子；要加过渡得额外配transition，比如summary { transition: color 0.2s } -
summary::after的图标切换依赖于:open，不是summary:hover或summary:active—— 那些只管悬停和按下瞬间，不管最终状态
需要联动其他元素时，JS 不可避免但可以最小化
纯声明式只适用于单个 details。如果要做手风琴（展开一个、收起其余），就必须用 JS 协调多个 open 属性：
- 监听每个
details的toggle事件，而非click - 用
detailsEl.open = true/false设置状态，不要操作display或hidden - 若需同步触发事件（比如用户 JS 设置
open也想通知外部），得手动 dispatchtoggle事件，浏览器不会自动补发
最易被忽略的是：Safari 对 details 内容高度重排的时机很敏感，用 max-height 做动画时，目标值必须是精确像素，max-height: fit-content 或 auto 无法过渡。
