JavaScript树状菜单带复选框
带复选框的树状菜单，蛮适合用在文件管理器、权限配置这类场景。每个节点能展开收起，点一下还能选中，用户交互体验挺直观的。用 JS 来做这种东西其实不复杂，关键在于搞清楚数据结构怎么组织。
树状菜单的核心是层级数据，一般会有id、parentId，再配合个checked状态就能跑起来。你可以用数组模拟，也可以搞成对象树，看习惯。别忘了节点之间要能互相找得到，比如父找子、子找父。
HTML 那部分基本上就是递归渲染，每个节点用个，里面放个<input type="checkbox">，拼上Vue或React搞定，数据绑定和状态联动更舒服。
交互那块，重点在事件监听。你得监听change事件，根据当前勾选状态更新子节点、父节点的状态，这里可以写个递归函数搞定。别忘了加点防抖优化，是节点多的时候。
想加点动画？简单，CSS transition 或者 setTimeout 就能搞定展开/收起的效果。这样用户点开的时候不会觉得突兀，体验感 up。
如果你需要保存用户的选择状态，记得加个和后端 API 对接的接口，像/save-tree-state这种，存一下勾选数据。刷新也不怕，全保留。
哦对，移动端也别忽略。布局最好是响应式的，比如用flex或者媒体查询来适配，别让人手机上一点就歪了。
如果你懒得自己造轮子，可以去看下checktree目录里的文件，里面有 JS 逻辑、样式和 HTML 示例，直接拿来用或改都挺方便的。
文件大小：10.24KB
评论区