原理与设计目标
树形结构的HTML骨架
在实现复杂的树形菜单时，HTML 的多级嵌套结构是基础。通常采用 ul 与 li 的组合来呈现分层层级，顶层放置一个具有标识的节点，而每个节点再包含一个子树的 ul。核心点在于让每个节点同时包含一个隐藏的复选框和一个可点击的标签，以便通过 CSS 直接控制子树的显示与隐藏。递归能力来自于每个节点结构的一致性，确保任意深度的分支都能被同样的规则处理。
为了实现可维护性，应该在标记上保持一致的命名与标签关系：每个节点包含一个 <input type="checkbox"> 和一个 <label>，紧随其后的就是子树的 ul。结构统一性是后续样式递归生效的前提。
CSS 递归控制的思路
核心思想是将显示状态的逻辑放在 CSS 里，通过 输入框的选中状态来驱动相邻子树的显隐。每一级都独立拥有自己的复选框，与之对应的是一个直接的子树 ul，通过选择器 input:checked ~ ul 实现“展开/折叠”的效果。无 JavaScript 的递归控制是该方法的关键优势。
在浏览器对现代选择器的支持范围内，你还可以使用 更加严格的结构化选择器，以确保每个节点的状态只影响自己直接的子树。这种分层式的设计让树形菜单可以在任意深度扩展，同时保持性能稳定。
示例代码（HTML 结构）
<ul class="tree"><li><input type="checkbox" id="node1" /><label for="node1">一级节点 A</label><ul><li><input type="checkbox" id="node1-1" /><label for="node1-1">二级节点 A1</label><ul><li>叶子节点 A1.1</li><li>叶子节点 A1.2</li></ul></li><li><input type="checkbox" id="node1-2" /><label for="node1-2">二级节点 A2</label><ul><li>叶子节点 A2.1</li></ul></li></ul></li>
</ul>实现细节：无 JavaScript 的树形展示
复选框的可访问性设计
通过将复选框与标签通过 for/id 关联实现区域点击即可切换状态，这种做法对键盘导航友好，并且对屏幕阅读器也具有明确的结构语义。无障碍优先的实现依赖于原生表单控件的可聚焦性与标签的触发行为。
在 DOM 结构中，每个节点独立有一个 input，这使得树的任意分支都能单独展开或折叠，而不需要额外的脚本来管理状态。通过这种“自包含”的设计，树形菜单的可维护性与扩展性都得到提升。
视觉状态与过渡效果
为避免大幅改动布局，通常选用简单的显隐策略：未展开的子树使用 display: none，展开时切换为 display: block。如果希望有更平滑的体验，可以采用 opacity/transform 的渐隐渐现配合高度/最大高度的过渡实现渐变效果，但要注意动态内容的高度计算。
需要强调的点是：递归展开依赖于每一级的输入，只要某一级的复选框被选中，其直接子树就会显示出来；同样的规则会作用于更深一层的节点，从而实现无限深的树形结构。对于样式而言，保持简单的规则有助于浏览器的渲染效率。
示例代码（CSS 控制逻辑）
/* 基本重置与结构化样式 */
.tree, .tree ul { list-style: none;padding: 0;margin: 0;
}.tree li {position: relative;padding: .25em 0;/* 可选：分层线条以增强视觉分割 */border-left: 1px solid #ddd;
}.tree input {position: absolute;left: -9999px; /* 隐藏但可从键盘触发，保持可访问性 */
}/* 仅展开直接子树的规则 */
.tree > li > ul { display: none; }/* 当某级复选框被选中时，显示其直接子树 */
.tree input:checked ~ ul { display: block; }/* 进阶：保持更好的可视结构，可进一步定制标签样式 */
.tree > li > label {cursor: pointer;display: inline-block;padding: 0.25em 0.5em;user-select: none;
}
进阶实践：多级递归的性能与兼容性
结构与命名约定
为了让递归逻辑清晰，建议对类名和结构进行一致命名：class="tree" 作为顶层容器，ul 与 li 按层级嵌套，input 的 id 与 label 的 for 属性一一对应。这样的命名能让 CSS 选择器保持简单且可扩展，任何深度的子树都遵循同一规则。
在实际项目中，维护一个小型的文档结构，标注每个节点的层级和用途，有助于团队协作和后续的维护工作。一致性命名是大型树形菜单稳定运行的关键。
兼容性与渐进增强
该方法依赖于标准的复选框与通用兄弟选择器，在主流浏览器（Chrome、Edge、Firefox、Safari）中具有良好兼容性。对旧版浏览器的支持需要谨慎评估，因为少数浏览器对某些选择器的实现可能略有差异。若需要向后兼容，可以在 CSS 中给出回退规则，确保在无法展开时仍能正确获取节点结构信息。
如果浏览器支持新的伪类选择器 :has()，还可以进一步扩展，例如实现整棵树的折叠与展开状态的更简洁控制，但这属于“渐进增强”的范畴，不是必须条件。可选的增强方案能够提升交互密度与体验。
完整示例：含多级的树形菜单
<ul class="tree"><li><input type="checkbox" id="root" /><label for="root">根节点</label><ul><li><input type="checkbox" id="child-1" /><label for="child-1">子节点 1</label><ul><li>叶子 1.1</li><li>叶子 1.2</li></ul></li><li><input type="checkbox" id="child-2" /><label for="child-2">子节点 2</label><ul><li><input type="checkbox" id="grand" /><label for="grand">子节点 2-1</label><ul><li>叶子 2-1-1</li><li>叶子 2-1-2</li></ul></li></ul></li></ul></li>
</ul>