用html+css+js实现一个无限级树形控件

题目描述：

用html+css+js实现一个无限级树形控件，功能如下：

1.利用html、css展示一个树形菜单

2.点击箭头图标展开子项

3.点击父节点勾选图标能全选或全取消，点击叶节点勾选图标可以选中或取消

 

思路：

以上是一道题的题目描述，但是树形结构是如何给出的题目并没有说明，所以每个人都有不同的想法。（自己百度了一顿也没有百度到  (⊙⊙) ）

想法：

1、假如给出的是一个json结构，可以用原生JavaScript解析生成相应的DOM树，由于树的嵌套级数是未知的，所以会递归地生成DOM树，满足无限级树形的要求。

2、由于用html+css+原生js实现，这里没有提供具体的图标，所以上图中展开和收起的三角形符号可以用css的边框来实现。同时由于CheckBox自身的样式可能不是很好看，需要改变checkbox的默认样式。当然如果用图片设置的话就更好了，可以通过设置background来改变CheckBox的默认样式。

3、上述要求的基本功能实现起来还是比较简单的，这里就不多说了。

 

树形菜单示例：

 

实现效果：