原生 details 元素可直接实现语义化、无障碍折叠功能，无需手写 JS：用 <details><summary>标题</summary>内容</details> 即可，支持键盘操作、自动 aria 状态，兼容主流浏览器（Chrome 12+ 等），IE 除外。
用 details 和 summary 实现原生折叠，别手写 JS
浏览器原生支持的 details 元素就是为折叠/展开设计的，不需要监听点击、操作 display 或写 aria-expanded 状态。它自带语义、键盘可访问（空格/回车触发）、默认有过渡（虽然简陋），且兼容性已覆盖 Chrome 12+、Firefox 49+、Safari 6+、Edge 79+。
常见错误是强行用 div + click 事件模拟，结果漏掉焦点管理、屏幕阅读器支持，还多出一堆状态同步逻辑。
基础用法很简单：
<details> <summary>点击展开</summary> <p>这里是被折叠的内容</p> </details>
-
details默认收起；加open属性可默认展开：<details open> -
summary必须是details的第一个子元素，否则不生效 - 不要在
summary里套button——它本身已是可聚焦、可交互元素，嵌套会破坏语义和键盘行为
需要自定义样式或动画？用 CSS 覆盖，不是 JS 控制 height
原生 details 不支持 CSS 过渡（height: auto 无法过渡），但你可以用 max-height + overflow 配合 :has()（现代浏览器）或 JS 监听 toggle 事件来补足动画。更稳妥的做法是只改外观，不动行为：
立即学习“前端免费学习笔记（深入）”；
- 移除原生箭头：
summary::marker { content: "" } - 自定义图标（用伪元素或 SVG）：
summary::after { content: "▼"; }，再用[open] summary::after { content: "▲" } - 控制内边距、字体、背景色等，直接作用于
summary和details[open] > *
避免用 JS 动态读取内容高度再设 max-height——既卡顿又易出错（比如内容含图片未加载完）。如果真要平滑动画，优先考虑 transform: scaleY() 或 opacity，它们触发 GPU 加速且无需测量。
JS 手动控制时，toggle 事件比 click 更可靠
当必须用 JS 触发或监听展开/收起（比如外部按钮控制某个 details），别监听 click，用原生 toggle 事件：
const el = document.querySelector("details");
el.addEventListener("toggle", () => {
console.log("当前状态：", el.open);
});
-
toggle在用户交互（点击summary）或脚本调用el.open = !el.open后都会触发，而click只捕获点击，漏掉键盘操作（如空格键） - 修改
open属性会同步触发toggle，但不会触发click - 若需外部按钮控制，直接操作
el.open = true/false即可，不用手动 dispatchEvent
注意：IE 完全不支持 details，如需兼容，得降级为 div + ARIA 模式，但那是另一套逻辑，不属于“优化”范畴。
多个折叠区域协同？靠 DOM 结构或数据属性，别硬绑 JS 状态
所谓“协同”，比如“点 A 就收起 B、C”，本质是状态互斥。最轻量的做法是用同级结构 + 选择器定位：
<details class="accordion-item"><summary>A</summary></details> <details class="accordion-item"><summary>B</summary></details> <details class="accordion-item"><summary>C</summary></details>
然后 JS 只需：
document.querySelectorAll(".accordion-item").forEach(item => {
item.addEventListener("toggle", () => {
if (item.open) {
document.querySelectorAll(".accordion-item:not(:is(#current))")
.forEach(el => el.open = false);
}
});
});
- 用
:not(:is())避免自己关自己，比遍历加判断更简洁 - 不要用全局变量存“当前打开项 ID”，容易不同步；DOM 状态即真实状态
- 如果折叠区分散在不同容器中，用
data-group="faq"统一标记，再用[data-group="faq"]查询
真正容易被忽略的是：协同逻辑一旦变复杂（比如允许部分展开、带延迟关闭、嵌套折叠），details 的语义优势就迅速减弱，此时该换用专门的 UI 库或重构成受控组件——别硬撑。
