HTML怎么做横向折叠展开效果-html教程-PHP中文网

横向折叠不能用 details，应使用 max-width + overflow 模拟：收起态设 max-width: 0、overflow: hidden；展开态设具体 max-width 值（如 320px），配合 transition 和 data-expanded 属性控制。

html怎么做横向折叠展开效果

横向折叠用 `details` 会失效，别硬套

横向布局（比如 flex 或 grid 中并排的卡片、选项卡、功能模块）不能直接用 details + summary 实现「横向展开/收起」——因为 details 是垂直流式语义，浏览器只支持内容区域上下方向的显隐切换，对 flex-basis、width、grid-column 等横向尺寸不触发状态变更，也不支持 CSS transition 动画。

用 `max-width` + `overflow` 模拟横向收放

真正可行的横向折叠，核心是控制容器宽度 + 隐藏溢出 + 加过渡。关键不是“折叠内容”，而是“收缩容器本身”。

max-width 必须设具体值（如 200px），不能用 auto 或 fit-content，否则 transition 失效
收起态设 max-width: 0; overflow: hidden; padding: 0; border: none;
展开态设 max-width: 320px;（根据内容预估安全上限，太大会拖慢动画）
必须配 transition: max-width 0.3s ease-in-out, padding 0.3s, opacity 0.2s;，单写 all 容易引发重排抖动
如果容器内有 flex 子项，记得加 flex-shrink: 0，否则子项会被压缩干扰宽度计算

JS 控制时优先用 `data-expanded` 而非 `style.width`

直接操作 element.style.width = "0" 会覆盖 CSS 文件里的响应式规则，且无法与媒体查询联动。更稳的做法是用属性驱动：

DeepBI DHTML 页面生成器

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

下载

HTML 上写
CSS 写 [data-expanded="false"] { max-width: 0; overflow: hidden; } 和 [data-expanded="true"] { max-width: 320px; }


JS 里调用 el.toggleAttribute('data-expanded')，干净、可追溯、不影响其他样式层
避免监听 click 后手动查 offsetWidth 再赋值——DOM 回流开销大，且在 flex 容器中常读不准
多级横向折叠要防嵌套失效
浏览器对嵌套 details 支持极差，横向场景下更不可靠。若需“主菜单 → 子功能组 → 具体按钮”三级收放，必须全 JS 实现：

每级容器加唯一 data-level="1"、data-level="2"

点击某级时，先 querySelectorAll('[data-level="2"]') 找同级所有子容器，统一收起
再用 closest('[data-level]') 反推父级层级，避免事件冒泡误触上级
禁用 display: none 隐藏——改用 visibility: hidden; width: 0; overflow: hidden;，保证 DOM 节点持续存在，表单焦点、滚动位置、动画状态不丢失



横向折叠最易被忽略的是折痕区适配——双屏设备（如 Z Fold 横展）物理铰链在中间，max-width 值若超过左屏实际可用宽度，内容会被截断或错位。上线前务必用 window.getWindowSegments() 校验分屏数据，动态设置 CSS 变量作为宽度上限。