能实现，但必须严格满足dom顺序、层级关系和选择器精度三个硬条件：input与.submenu须同级且input在前；多级嵌套需每层独立checkbox；动画用max-height+overflow:hidden；label的for必须精确匹配input的id。
能实现，但必须严格满足 DOM 顺序、层级关系和选择器精度三个硬条件，缺一不可。
input 和 .submenu 必须同级且 input 在前
这是整个逻辑的物理基础。CSS 的 :checked ~ .submenu 或 :checked + .submenu 只能匹配「同一父容器下、位于 input 元素之后」的兄弟元素。
- ✅ 正确结构：
<input type="checkbox" id="node-1"><label for="node-1">文件</label><ul class="submenu">...</ul> - ❌ 错误结构：把
<ul class="submenu"></ul>套在<label></label>里，或插在 input 和 label 中间，或放在上层 div 中 —— 这时它不是兄弟，而是后代或无关节点，~完全失效 - ⚠️ 注意：HTML 中的换行、空格文本节点也算“中间元素”，会破坏
+（相邻兄弟）的选择，但~（后续兄弟）仍可工作；推荐统一用~更鲁棒
多级嵌套必须递归复用 checkbox + ~ 模式
每一层展开控制都得靠一个独立的 <input>，不能靠父级 checkbox “穿透”控制子级菜单 —— CSS 没有跨层级状态传递能力。
- 每个可折叠节点都要配一个
<input id="xxx" type="checkbox">，id 必须唯一 - 子菜单的
<ul class="submenu"></ul>必须紧接在对应<input>后面，且在同一父<ul></ul>内 - 示例片段中，
node-1-2的子菜单要由<input id="node-1-2">控制，而不是靠node-1的状态 - 别试图写
input:checked ~ ul ~ ul去“跳级”控制 —— 它不匹配嵌套结构，只匹配平级后续兄弟
动画要用 max-height + overflow:hidden，display 无法过渡
直接切 display: none ↔ block 会导致瞬间闪现，没有过渡效果，且无法做渐入/滑动动画。
- 初始状态设
.submenu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; } - 展开时用
input:checked ~ .submenu { max-height: 300px; }（值需略大于子菜单实际高度，否则动画会被截断） - 漏掉
overflow: hidden是高频翻车点：max-height 过渡过程中内容会直接撑出来，像被弹出一样 - 避免用
height做过渡 —— 高度不确定时无法预设值，且 height: auto 不参与 transition
label 与 input 的 for/id 关联必须精确匹配
点击箭头或文字没反应？90% 是这里出错。CSS 不管你“看起来像按钮”，只认 DOM 属性是否真实绑定。
-
<input id="menu-2">和<label for="menu-2"></label>的字符串必须**完全一致**，包括大小写、连字符、数字 - 不要用
name、class或其他属性替代id；for属性只认id - 更稳妥写法：把
<input>直接包进<label></label>，此时无需for和id，但要注意语义和无障碍兼容性 - 隐藏 checkbox 推荐用
position: absolute; left: -9999px;，别用visibility: hidden或opacity: 0—— 它们仍占布局空间，可能影响 label 点击热区
最易被忽略的是：所有 checkbox 的状态变更都依赖用户真实交互（点击/空格），JS 设置 input.checked = true 虽然能触发 DOM 属性变化并生效，但若用 setAttribute('checked', '') 忘记移除，就会卡死状态 —— 这种细节在调试时很难一眼发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
