原生折叠卡片用 和 实现， 必须是 的第一个且唯一子元素；自定义样式应避免 summary::marker（Safari 不支持），改用 list-style: none + ::after 插入图标；默认支持键盘和读屏，禁用 role="button"；联动需 JS 控制 open 属性，监听 toggle 事件。
用 <details></details> 和 <summary></summary> 实现原生折叠卡片
不需要 JS 或 CSS 框架，HTML5 原生就支持折叠展开——<details></details> 是语义化容器，<summary></summary> 是可点击的标题栏。浏览器默认提供箭头图标和展开/收起逻辑，兼容性从 Chrome 12、Firefox 49、Safari 6 开始都很好（Edge 79+）。
常见错误是把 <summary></summary> 写成多个，或在它外面套 <div> ——<code><summary></summary> 必须是 <details></details> 的**第一个子元素**，且只能有一个：
<details> <summary>点击展开说明</summary> <p>这里是折叠内容，可以放任意 HTML：列表、代码块、图片…</p> </details>
自定义箭头和样式时绕开 summary::marker 兼容陷阱
想隐藏默认箭头、换图标或改颜色？别直接用 summary::marker { display: none } —— Safari 目前不支持该伪元素，会导致箭头消失但无法点击展开（bug 表现为 summary 区域“失活”）。
立即学习“前端免费学习笔记（深入）”；
稳妥做法是覆盖整个 <summary></summary> 的外观，再手动加图标：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用
list-style: none清除原生标记（Firefox/Chrome 有效） - 用
position: relative+::after插入 SVG 或 Unicode 箭头（如▼），并控制旋转状态 - 通过
details[open] summary::after切换transform: rotate(180deg)
注意：不要给 <summary></summary> 设 display: block 后又加 padding，容易撑高导致点击热区偏移。
让折叠卡片支持键盘操作和屏幕阅读器
原生 <details></details> 默认支持空格/回车触发展开，但部分旧版读屏（如 NVDA 2021.1）可能不识别 <summary></summary> 的 role。补救措施很简单：
- 确保
<summary></summary>不带role="button"（会干扰原生语义） - 若内容含表单控件（如
<input>），在<details></details>上加aria-expanded并用 JS 同步状态（仅必要时） - 避免在
<summary></summary>里放链接或按钮——用户可能误点两次（一次展开，一次跳转/提交）
测试方法：用 Tab 键聚焦到 summary，按空格看是否展开；用 VoiceOver 打开后听读出的“disclosure widget”提示是否正常。
嵌套折叠或配合 JS 做联动时的关键约束
多个 <details></details> 卡片默认独立工作，但想实现“单选折叠”（如手风琴效果）必须用 JS 控制 open 属性。这时候要注意：
-
<details open></details>是布尔属性，设为open="false"依然生效——得用removeAttribute('open')或el.open = false - 监听
toggle事件比监听click更可靠，因为前者涵盖键盘操作和 JS 修改 - 不要在
<details></details>内部再嵌套<details></details>——多数浏览器支持，但 Safari 在 iOS 15.4 之前有滚动穿透 bug
复杂交互（比如展开时触发动画、加载远程内容）建议保留原生结构，只用 JS 增强，而不是用 <div> + class 模拟——语义丢失后对 SEO 和无障碍是硬伤。</div>
