纯css树形菜单用checkbox作开关，通过:checked ~ .submenu或+选择器控制显隐；需确保input与.submenu同级且input在前，隐藏input推荐position: absolute; left: -9999px；动画用max-height过渡而非height或display。
怎么用 checkbox + ~ 和 + 选择器控制菜单展开收起
纯 CSS 实现树形折叠菜单，核心就是把 checkbox 当开关用，靠它被选中/未选中的状态，驱动后续子菜单的显示与隐藏。关键不是 js 控制，而是利用 CSS 的兄弟选择器（~）和相邻兄弟选择器（+）去“监听”这个状态变化。
常见错误是直接对 input[type="checkbox"] 设置 display: none 后，忘了它后面的标签必须紧邻或同级，否则选择器链就断了。比如误把 label 放在 input 外层 div 里，那 input:checked ~ .submenu 就完全不生效。
- 确保
input和要控制的.submenu在同一父容器下，且.submenu是input的后续兄弟（用~）或紧邻兄弟（用+） -
input必须在 HTML 中出现在.submenu之前，顺序不能反 - 别用
visibility: hidden或opacity: 0隐藏input，它们仍占布局空间；推荐position: absolute; left: -9999px或clip-path: inset(100%)
为什么 :checked ~ .submenu 有时不生效
这是最常卡住的地方：看似结构对了，但子菜单死活不出现。根本原因通常是 dom 层级或选择器精度问题。
比如你写 input:checked ~ .submenu，但实际 HTML 中 .submenu 并非 input 的直接兄弟，而是嵌套在 label 里面——那它就不是“后续兄弟”，而是“后代”，~ 完全匹配不到。
立即学习“前端免费学习笔记（深入）”；
- 检查浏览器开发者工具里，
input和目标元素是否真正在同一层级（同属一个ul或div） - 如果子菜单藏在
label内，得把input移到label外面，或者改用label[for="id"]关联 + JS 模拟点击（此时已脱离纯 CSS 范畴） -
~匹配所有后续兄弟，+只匹配紧邻下一个；若中间插了其他元素（如文字节点、span），+就失效，~还能救一命
details / summary 能替代吗？什么时候该用它
能，而且更语义、更无障碍、原生支持键盘操作（空格/回车切换）。但它不支持多级嵌套的“树形”展开逻辑 —— details 默认只管自己一层，子 details 不会随父级联动收起。
如果你只需要单层折叠（比如 FAQ 列表），直接用 details 更省事、兼容性更好（chrome 12+、firefox 49+、safari 6.2+ 都支持）。但要做文件夹式多级菜单，还是得回到 checkbox + CSS 的老办法。
-
details[open]状态可被 JS 控制，但无法用纯 CSS 响应“父级关闭时子级自动关闭”这种逻辑 - 想加动画？
details的summary下内容默认无过渡，需手动包裹并设置max-height+transition，反而比checkbox方案更麻烦 - IE 完全不支持
details，而checkbox方案 IE9+ 就能跑（只要不用clip-path等新特性）
折叠动画怎么加才不卡、不闪
CSS 动画的关键是：不能对 display 做过渡（它不可动画），也不能直接对 height: auto 过渡（浏览器算不出终点值）。得绕道。
最稳的做法是用 max-height + overflow: hidden，设一个足够大的固定值（比如 max-height: 500px），再配合 transition: max-height 0.3s ease。虽然不够精确，但视觉上自然，兼容性好。
- 别设
max-height: 0→max-height: 100vh，后者可能在内容少时产生多余滚动或延迟收起 - 如果菜单项高度差异极大（比如有的含图片、有的只有文字），500px 可能不够或太长；可按最大可能行数估算，例如每行 24px × 20 行 = 480px
- 想真正精准，就得 JS 测高 + 写内联
style，那就不是纯 CSS 方案了
CSS 树形菜单的难点不在写法本身，而在 DOM 结构必须严格服从选择器的路径约束。稍微移个标签位置，整个折叠逻辑就静默失效——这种“看不见的依赖”最容易被忽略。