HTML怎么制作极简风格折叠展开效果-html教程-PHP中文网

是浏览器原生支持的折叠组件，无需 JS 和 CSS 即可运行，语义正确、无障碍友好；必须将作为其第一个子元素，否则失效；IE 不支持，现代浏览器均兼容；需自定义箭头或动画时应绕过 ::marker 改用 ::before；互斥效果需监听 toggle 事件；若需复杂动画、旧浏览器兼容或动态布局，直接使用 max-height + JS 更稳妥。

html怎么制作极简风格折叠展开效果

用和一行代码就能跑通

不需要 JS，不写 CSS，浏览器原生支持，键盘空格/回车可触发，屏幕阅读器能识别——

就是为这设计的。常见错误是漏掉，或者把它写成第二个子元素，结果点不动。

基础写法就三行：

<details><summary>点击展开</summary><p>这里是内容</p>
</details>

必须是的第一个子元素，否则折叠逻辑失效
默认收起；加 open 属性（）可默认展开
内容区域自动参与文档流，不用设 height: 0 或 overflow: hidden
IE 完全不支持，其他现代浏览器（Chrome 12+、Firefox 49+、Safari 6+、Edge）均可用

`summary::marker` 在 Safari 里经常失效，改用 `::before`

想换箭头图标、加旋转动画？别碰 summary::marker { content: "" } —— Safari 15.4 之前根本不认，而且就算认了，也无法加 transition。

安全做法是彻底绕过 ::marker：

DeepBI DHTML 页面生成器

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

下载

summary {
  list-style: none;
}
summary::before {
  content: "▶";
  margin-right: 8px;
  transition: transform 0.2s;
}
details[open] summary::before {
  transform: rotate(90deg);
}