原生折叠卡片用 和 实现， 必须是 的第一个且唯一子元素；自定义样式应避免 summary::marker（Safari 不支持），改用 list-style: none + ::after 插入图标；默认支持键盘和读屏，禁用 role="button"；联动需 JS 控制 open 属性，监听 toggle 事件。

用

和

实现原生折叠卡片

不需要 JS 或 CSS 框架，HTML5 原生就支持折叠展开——

是语义化容器，

是可点击的标题栏。浏览器默认提供箭头图标和展开/收起逻辑，兼容性从 Chrome 12、Firefox 49、Safari 6 开始都很好（Edge 79+）。

常见错误是把

写成多个，或在它外面套

——

必须是

的**第一个子元素**，且只能有一个：

<details><summary>点击展开说明</summary><p>这里是折叠内容，可以放任意 HTML：列表、代码块、图片…</p>
</details>

自定义箭头和样式时绕开 summary::marker 兼容陷阱

想隐藏默认箭头、换图标或改颜色？别直接用 summary::marker { display: none } —— Safari 目前不支持该伪元素，会导致箭头消失但无法点击展开（bug 表现为 summary 区域“失活”）。

稳妥做法是覆盖整个

的外观，再手动加图标：

• 用 list-style: none 清除原生标记（Firefox/Chrome 有效）
• 用 position: relative + ::after 插入 SVG 或 Unicode 箭头（如 ▼），并控制旋转状态
• 通过 details[open] summary::after 切换 transform: rotate(180deg)

注意：不要给

设 display: block 后又加 padding，容易撑高导致点击热区偏移。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

让折叠卡片支持键盘操作和屏幕阅读器

原生

默认支持空格/回车触发展开，但部分旧版读屏（如 NVDA 2021.1）可能不识别

的 role。补救措施很简单：

• 确保
  不带 role="button"（会干扰原生语义）
• 若内容含表单控件（如 ），在
  上加 aria-expanded 并用 JS 同步状态（仅必要时）
• 避免在
  里放链接或按钮——用户可能误点两次（一次展开，一次跳转/提交）

测试方法：用 Tab 键聚焦到 summary，按空格看是否展开；用 VoiceOver 打开后听读出的“disclosure widget”提示是否正常。

嵌套折叠或配合 JS 做联动时的关键约束

多个

卡片默认独立工作，但想实现“单选折叠”（如手风琴效果）必须用 JS 控制 open 属性。这时候要注意：

• 是布尔属性，设为 open="false" 依然生效——得用 removeAttribute('open') 或 el.open = false
• 监听 toggle 事件比监听 click 更可靠，因为前者涵盖键盘操作和 JS 修改
• 不要在
  内部再嵌套
  ——多数浏览器支持，但 Safari 在 iOS 15.4 之前有滚动穿透 bug

复杂交互（比如展开时触发动画、加载远程内容）建议保留原生结构，只用 JS 增强，而不是用

+ class 模拟——语义丢失后对 SEO 和无障碍是硬伤。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！