details 和 summary 是 html5 原生可折叠标签，无需 js 即支持键盘操作、屏幕阅读器及 seo；details 为容器，summary 必为首个子元素，点击自动切换 open 属性并显示/隐藏内容。
details 和 summary 是 HTML5 原生提供的语义化标签，专为构建可折叠/展开区域而设计。它们不依赖 JavaScript 就能实现基础交互，同时天然支持键盘操作（空格键、回车键切换）、屏幕阅读器（自动添加 aria-expanded）和 SEO 友好结构。
基础用法与默认行为
details 作为容器，控制内容显隐；summary 必须是它的第一个子元素，充当点击触发标题。浏览器会自动：
- 默认隐藏 details 内除 summary 外的所有内容
- 在 summary 左侧渲染一个方向随状态变化的三角指示符（open 时朝下，关闭时朝右）
- 点击 summary 时，自动添加或移除 details 的 open 属性（注意：是属性存在与否，不是布尔值赋值）
- 允许通过
<details open></details>让内容初始展开
样式定制的关键点
原生箭头可按需美化或替换，但需注意跨浏览器写法：
- 隐藏默认箭头：
details > summary::marker { content: "" } - Chrome / Safari 用
::-webkit-details-marker，Firefox 用::-moz-list-bullet - summary 内可嵌入 、 等内联元素，但避免放
- 想加图标？推荐用 CSS 的
::before伪元素，而非塞进 HTML
实现手风琴效果（单开模式）
原生 details 互不影响，要“点一个、关其他”，必须用 JavaScript 控制：
- 将所有 details 包在统一容器中（如
<div class="accordion">） <li>监听每个 details 的 click 事件，遍历同级所有项，设 <code>panel.open = false - 再设当前项
panel.open = true（比 remove/setAttribute 更可靠） - 不要给 summary 单独绑 click，会干扰原生 toggle 行为
- Safari（尤其 iOS 15.4 之前）对 summary 点击热区较窄，建议增加 padding 提升可点性
- 旧版 Edge（EdgeHTML）完全不支持，会退化为静态内容，需考虑降级方案
- 不能直接给 details 加 height 过渡动画——因为高度由内容决定，height: auto 不支持 transition
- summary 缺失时，浏览器会自动生成文字为“详细信息”的默认摘要，但语义弱，不推荐依赖
注意事项与兼容性提醒
看似简单，但几个细节容易踩坑：
