HTML折叠展开模块怎么搭建？页面组件制作-html教程-PHP中文网

details+summary是浏览器原生支持的语义化折叠模块，无需JS/CSS即可运行；summary必须紧随details标签后、不可有空格或换行；默认收起，加open属性可默认展开；IE不支持，需兼容时才用JS方案。

html折叠展开模块怎么搭建？页面组件制作

用 `details` + `summary` 搭建最简折叠模块

直接写 HTML 就能跑，不用 JS、不配 CSS 也能工作。这是当前浏览器（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+）原生支持的语义化方案，键盘可操作、屏幕阅读器能识别。

常见错误是把 summary 写成第二个子元素，比如中间加了空格、换行或

标签——此时点击完全没反应，summary 会被当作文本渲染。

summary 必须紧跟在开始标签后，不能有空格、换行、注释或其他 DOM 节点
所有标题文字、图标、按钮（如“编辑”“复制”）都得塞进 summary 标签内部，不能放在它外面
默认收起；需要默认展开，直接加 open 属性：
IE 不支持，若需兼容 IE，才考虑 JS 方案（如 class 切换 + max-height）

自定义 `summary` 样式但不破坏交互

可以直接改颜色、字体、内边距，但不能动语义关键属性。比如设 display: block 或 position: relative 通常没事，但设 display: flex 可能干扰焦点逻辑，pointer-events: none 会彻底禁用点击。

隐藏原生箭头并加旋转图标，推荐用 ::before 而非 ::marker，因为后者在 Safari 15.4 之前支持差：

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

别给 summary 加 role="button" 或 tabindex：它本来就是可聚焦按钮，加了反而可能重复触发
想让图标响应更快？用 transform: scaleY() 动画比 max-height 更稳，无需测量内容高度
如果要在点击时记录埋点或联动其他组件，监听 details 元素的 toggle 事件，不是 summary 的 click

JS 控制开闭状态时的 Safari 兼容陷阱

Safari ≤ 15.4 中，运行时设置 details.open = true 或 details.setAttribute('open', '') 常常无效：DOM 上已标记 open，但视觉仍是收起状态。

DeepBI DHTML 页面生成器

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

下载

初始化展开必须靠 HTML 写死：，别指望 JS 在 DOMContentLoaded 里补
运行时切换优先用 details.toggle() 方法，它在 Safari 15.3+ 中兼容性明显好于直接赋值
仍要兼容 Safari 15.3 及更早？可在 DOMContentLoaded 后加一行 details.offsetHeight 强制重排，再调用 toggle()
批量操作（如“全部展开”）时，只读写 open 属性，不要删节点、切 class 或改 style.display —— 这会绕过原生逻辑，丢掉无障碍能力

加动画时为什么别碰 `max-height`？

很多人用 max-height: 0 → max-height: 500px 配合 transition 实现高度过渡，但内容高度不确定，固定值要么裁剪文字，要么留大片空白。

更可靠的做法是放弃高度动画，只做 opacity 和 transform: scaleY()：

details > * {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: opacity 0.2s, transform 0.2s;
}
details[open] > * {
  opacity: 1;
  transform: scaleY(1);
}