每日挑战 #7：‘递归’文件夹树 📂

Source: Dev.to

任务

创建一个可以展开和收起的目录树（文件夹嵌套文件夹）。它需要看起来和真实代码编辑器的侧边栏一样。

规则 🚫

• 禁止使用 JavaScript： 不得使用脚本来切换 “active” 类或处理点击事件。
• 仅使用纯 CSS/HTML： 使用 Checkbox Hack（<input type="checkbox">）来管理每个文件夹的展开/收起状态。
• 无限层级： 样式必须在文件夹深度为 1 层或 10 层时都能正常工作。

目标 🏆

• 点击文件夹名称应展开，显示内部文件。
• 再次点击应收起。
• 文件和文件夹应根据其层级深度进行适当缩进。

小技巧： 使用相邻兄弟选择器 input:checked + label + ul，仅在隐藏的复选框被选中时显示嵌套列表！

如何参赛

在评论中留下你的 CodePen 或 GitHub Repo！

加分项： 使用不同的图标（如 📁 和 📂），在文件夹打开时进行切换。

额外加分： 添加 “悬停效果”，在不高亮嵌套子项的情况下突出显示整行。