用details和summary最快实现可折叠卡片：只需<details><summary>标题</summary><p>内容</p></details>，summary必须为首个子元素，原生支持展开/收起、键盘操作及无障碍，无需JS或CSS。
用 details 和 summary 最快实现可折叠卡片
不用 JS、不写 CSS，原生 HTML 就能做出语义清晰、无障碍友好的折叠卡片。details 是专为此设计的语义化元素，浏览器默认支持展开/收起状态，还自带箭头图标和键盘导航（空格/回车切换）。
常见错误是手动监听点击 + 切换 display 或 max-height，既冗余又破坏可访问性。别绕远路。
基础写法：
<details> <summary>点击展开说明</summary> <p>这里是折叠内容，可以放任意 HTML 元素。</p> </details>
-
summary必须是details的第一个子元素，否则无法触发折叠逻辑 - 默认收起；加
open属性可默认展开：<details open> - Chrome/Firefox/Safari/Edge 全支持，IE 不支持（需降级时再考虑 JS 方案）
自定义 summary 样式但保留默认行为
直接给 summary 写 color、font-weight 没问题，但改 display 或移除伪元素会丢掉默认箭头和交互逻辑。
立即学习“前端免费学习笔记（深入）”；
想隐藏原生箭头并换图标？用 ::marker 重置，再用 ::after 补自定义符号：
summary {
list-style: none;
}
summary::marker {
content: "";
}
summary::after {
content: "▶";
margin-left: 8px;
transition: transform 0.2s;
}
details[open] summary::after {
transform: rotate(90deg);
}
- 不要用
summary { display: block; }—— 这会让它失去按钮语义和键盘焦点能力 -
::marker在 Safari 15.4+ 和新版 Chrome/Firefox 支持良好；旧 Safari 可用appearance: none+background替代 - 动画只能作用于
transform、opacity等可合成属性，避免触发布局重排
需要 JS 控制时，只操作 open 属性，别动 DOM 结构
比如页面加载后根据 URL 参数自动展开某张卡片，或点击按钮批量展开所有卡片 —— 这些场景 JS 只需读写 open 属性，不要去增删 class 或切 height。
示例：点击按钮展开全部
document.querySelector("#expand-all").addEventListener("click", () => {
document.querySelectorAll("details").forEach(el => el.open = true);
});
- 设置
el.open = true会触发toggle事件，可监听：el.addEventListener("toggle", () => console.log(el.open)) - 避免用
el.setAttribute("open", "")—— 它不会同步更新el.open属性值，造成状态不一致 - 批量操作后无需手动触发重绘，浏览器自动处理样式和动画
兼容 IE 或需要更复杂交互动效怎么办
如果项目必须支持 IE11，details 无法使用，得退回到 JS + CSS 方案。但重点不是“怎么写”，而是“怎么最小化补丁”：
推荐用 aria-expanded + aria-controls 维持可访问性，并仅对 IE 加载轻量 JS：
<button aria-expanded="false" aria-controls="card-1">标题</button> <div id="card-1" hidden>内容</div>
- JS 只负责切换
hidden属性和aria-expanded值，CSS 用[hidden] { display: none; }控制显隐 - 不要为动画写 JS 计算高度 —— 用
max-height+overflow: hidden更可靠（设足够大值如max-height: 500px） - 真正的坑在于：很多 polyfill 直接替换整个 DOM，导致 Vue/React 组件失活或事件丢失；优先选属性级修补方案
原生 details 覆盖面已超 95%，IE 兼容需求越晚介入，后续维护成本越低。先跑通现代浏览器路径，再按需打补丁。
