纯css实现移动端折叠菜单需用input[type="checkbox"]+:checked伪类模拟开关，核心是正确结构（input前置同级）、选择器匹配（~或+）、max-height过渡动画及可访问性隐藏方式。
纯 CSS 能实现移动端折叠菜单，但必须用 input[type="checkbox"] + :checked 伪类模拟点击开关，否则无法响应用户操作——这是最轻量、兼容 IE9+ 且不依赖 JS 的方案。
为什么直接写 @media 但菜单不隐藏？
常见错误是只写了媒体查询，却忘了给菜单容器设初始隐藏状态。小屏下若没提前移除布局流，菜单项仍会占位或与汉堡按钮重叠。
-
.navbar-collapse必须在默认样式（非媒体查询内）设display: none - 在
@media (min-width: 768px)中才改回display: flex或display: block - 别用
visibility: hidden替代 —— 它仍占空间，背后元素点不到 - 汉堡按钮
.navbar-toggler默认显示，大屏下才设display: none
input:checked ~ .menu 选择器为什么没反应？
结构错或选择器不匹配是点击无效的主因。~ 是通用兄弟选择器，要求 .menu 必须和 input 同级，且在它之后；+ 只能选紧邻下一个兄弟。
-
<input id="nav-toggle" type="checkbox">必须放在 DOM 最前面，不可用display: none隐藏（旧版 Safari 会跳过状态） - 推荐用
position: absolute; opacity: 0; pointer-events: none隐藏 checkbox，保留可触发性 -
<label for="nav-toggle"></label>必须精确匹配input的id - 菜单容器得写成
<nav class="menu">...</nav>，确保#nav-toggle:checked ~ .menu能命中
展开动画卡顿或 iOS 上点击穿透？
因为 height: 0 ↔ auto 无法过渡，硬加 transition 没效果。用 max-height 是唯一靠谱方案。
- 关闭时：设
max-height: 0; overflow: hidden - 展开时：设一个足够大的值，比如
max-height: 300px（比最大可能内容高即可，别写9999px） - 动画加在
max-height上：transition: max-height 0.3s ease-in-out - 菜单含下拉项时，子菜单也得用
max-height控制，否则过渡断层 - 避免在菜单容器上加
position: fixed或transform，iOS 视口计算会异常
真正容易被忽略的是：DOM 中 input 必须在 label 和菜单之前，且中间不能有空格或换行干扰兄弟选择器匹配；另外，max-height 的上限值如果估小了，字体或图片加载延迟会导致内容被截断——加 padding-bottom: 1px 可微调重排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
