<details>标签原生支持折叠展开，无需JavaScript；<summary>必须为首个子元素，用::before伪元素自定义箭头最兼容；JS应操作open属性并监听toggle事件；IE不支持需polyfill，无障碍需保留语义与焦点。
details 标签本身就能实现折叠，不需要 JS
直接用 <details> 和 <summary> 就能完成基础展开/收起，浏览器原生支持，无需额外脚本。它不是“需要教程才能用”的功能，而是开箱即用的语义化 HTML 元素。
常见错误是手动加 onclick 或监听 click 事件去控制 display，这反而破坏了可访问性（如屏幕阅读器无法识别状态）和语义结构。
-
<details>默认收起，open属性可设为默认展开 -
<summary>必须是<details>的第一个子元素，否则部分浏览器不渲染箭头或不响应点击 - 点击
<summary>文字区域即可切换状态，包括空格、图标等内部内容
如何自定义 summary 的箭头和样式
浏览器对 <summary> 的默认箭头（三角形）使用伪元素 ::marker 或私有伪类（如 Chrome 的 ::-webkit-details-marker）控制，不能用普通 CSS 覆盖所有场景。必须重置并手动添加图标才可靠。
<style>
details > summary {
list-style: none; /* 移除原生箭头 */
}
details > summary::before {
content: "▶ ";
margin-right: 4px;
font-size: 0.9em;
}
details[open] > summary::before {
content: "▼ ";
}
</style>注意：::marker 在部分旧版 Safari 中不生效，::-webkit-details-marker 仅限 WebKit 内核；统一用 ::before 是最兼容的方案。
立即学习“前端免费学习笔记（深入）”；
JavaScript 控制 open 状态时要注意什么
虽然原生行为已足够，但若需程序化控制（比如按钮触发、表单提交后自动展开错误项），应操作 open 属性而非 class 或 style。
- 用
element.open = true或element.setAttribute('open', '')，不要写element.style.display = 'block' - 监听状态变化应使用
toggle事件（非click），它在用户交互或 JS 修改open后都会触发 -
toggle事件没有取消默认行为的机制，也不需要 —— 它只是通知状态已变
const detailsEl = document.querySelector('details');
detailsEl.addEventListener('toggle', () => {
console.log('当前状态：', detailsEl.open);
});兼容性和无障碍要点容易被忽略
IE 完全不支持 <details>，Edge 12–18 支持但无动画；现代项目若需兼容 IE，必须用 polyfill（如 details-polyfill）或降级为手写 JS 折叠逻辑。
无障碍方面：<details> 自动处理 aria-expanded 和焦点管理，但如果你替换了 <summary> 内容为按钮或图标，要确保保留 role="button" 和键盘可聚焦（tabindex="0"），否则键盘用户无法操作。
真正复杂的地方不在“怎么写”，而在于「要不要用」—— 如果需要动画过渡、嵌套折叠、或服务端渲染时动态控制初始状态，<details> 的能力就受限了，这时候该换 React/Angular 的组件方案，而不是硬塞 CSS 动画进去。
