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