纯CSS实现响应式折叠菜单必须用+:checked驱动显隐，因纯CSS无法监听点击；需确保input同级前置、用~选择器、max-height过渡替代height、默认隐藏菜单并配合媒体查询适配。
纯 CSS 实现响应式折叠菜单，必须用 + :checked 伪类驱动显隐，否则无法在无 JS 场景下响应点击——这是唯一兼容 IE9+ 且不触发重排的轻量方案。
为什么 #nav-toggle:checked ~ .menu 没反应？
结构错或选择器失配是点击无效的主因。兄弟选择器 ~ 要求目标元素必须和 同级、且严格位于其后；中间不能有空格、换行或其它节点干扰 DOM 流。
-
必须放在 HTML 中最前面，不可用display: none隐藏（旧版 Safari 会跳过状态） - 推荐用
position: absolute; opacity: 0; pointer-events: none隐藏复选框，保留可触发性 -
的for值必须精确匹配input的id - 菜单容器得写成
或类似结构，确保选择器能命中
为什么菜单展开卡顿或 iOS 上点不到内容？
因为 height: 0 ↔ height: auto 无法过渡，硬加 transition 完全无效。iOS Safari 对 height 变化极其敏感，还容易引发滚动错位。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 改用
max-height：关闭时设max-height: 0; overflow: hidden，展开时设一个足够大的值（如max-height: 400px） - 别写
max-height: 9999px——字体加载延迟或图片撑开可能导致截断；加padding-bottom: 1px可微调重排 - 动画只加在
max-height上：transition: max-height 0.3s ease-in-out - 避免在菜单容器上写
position: fixed或transform，iOS 视口计算会异常
媒体查询里只写了 display: block，但小屏菜单还是占位？
常见错误是只靠媒体查询控制显示，却忘了给菜单设初始隐藏状态。小屏下若没提前移除布局流，菜单项仍会占位或与汉堡按钮重叠。
-
.menu默认（非媒体查询内）必须设display: none - 在
@media (min-width: 768px)中才设回display: flex或display: block - 别用
visibility: hidden替代——它仍占空间，背后元素点不到 - 汉堡按钮默认显示，大屏下才用媒体查询设
display: none
真正容易被忽略的是：DOM 中 必须紧邻 和 之前，且中间不能有文本节点；max-height 的上限值如果估小了，动态内容加载后会被截断——这不是 bug，是 CSS 过渡机制本身的限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
