纯CSS树状目录需用隐藏checkbox:checked控制显隐子菜单设display:none、max-height过渡及overflow:hidden防溢出label与input的id必须严格匹配且同级。怎么让CSS树状目录支持点击展开收起纯CSS实现树状目录交互核心靠 :checked 隐藏的 input typecheckbox 控制显隐不是靠JS监听点击。没这个输入框整个交互链就断了。常见错误是直接对 li 或 div 加 :hover结果鼠标一移开就塌了根本没法多层操作或者忘了给 input 加 display: none导致页面上冒出一堆复选框。每个可展开节点必须配一个 input idxxx typecheckbox且 id 要唯一紧接其后的子容器如 ul用相邻兄弟选择器 input:checked ul 控制显示子节点的 input 必须放在父 ul 内部否则无法形成嵌套控制流不要用 :focus 或 :active 替代 :checked它们不维持状态为什么子菜单默认要 display: none 且过渡要加 overflow: hiddendisplay: none 是初始隐藏的底线但光这样还不够如果只靠它切换展开时没有渐变、收起时内容会“闪退”用户体验断裂。加 max-height 和 transition 可模拟高度变化但前提是 overflow: hidden 必须存在否则过渡过程中内容会溢出。典型翻车现场设了 max-height: 0 → max-height: 300px却漏掉 overflow: hidden结果展开瞬间所有子项全挤出来像弹簧崩开。立即学习“前端免费学习笔记深入”max-height 值不能用 autoCSS 过渡不支持 auto 到具体值的动画推荐用足够大的固定值如 max-height: 500px覆盖绝大多数嵌套深度transition: max-height 0.3s ease-in-out 比 height 更稳妥避免重排抖动如果子项含图片或异步加载内容首次展开可能高度计算不准需预留余量递归结构里 label 和 for 属性怎么配才不串行每个可折叠节点需要一个可点击区域用 label 包裹文字并绑定 for指向对应 input 的 id。一旦 for 值写错或重复点击就失效或者点一个却触发多个节点。 Giiso写作机器人 Giiso写作机器人让写作更简单