版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cc_fys/article/details/81284638
题目描述：
用html+css+js实现一个无限级树形控件，功能如下：
1.利用html、css展示一个树形菜单
2.点击箭头图标展开子项
3.点击父节点勾选图标能全选或全取消，点击叶节点勾选图标可以选中或取消
思路：
以上是一道题的题目描述，但是树形结构是如何给出的题目并没有说明，所以每个人都有不同的想法。（自己百度了一顿也没有百度到 (⊙⊙) ）
想法：
1、假如给出的是一个json结构，可以用原生JavaScript解析生成相应的DOM树，由于树的嵌套级数是未知的，所以会递归地生成DOM树，满足无限级树形的要求。
2、由于用html+css+原生js实现，这里没有提供具体的图标，所以上图中展开和收起的三角形符号可以用css的边框来实现。同时由于CheckBox自身的样式可能不是很好看，需要改变checkbox的默认样式。当然如果用图片设置的话就更好了，可以通过设置background来改变CheckBox的默认样式。
3、上述要求的基本功能实现起来还是比较简单的，这里就不多说了。
树形菜单示例：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>树形菜单示例</title>
<style type="text/css">
ul>li{
list-style: none;
}
/* 可展开*/
.switch-open
{
margin-left:-12px;
border:6px solid transparent;
display:inline-block;
width:0px;
height:0px;
border-top-color: black;
}
/* 展开完毕*/
.switch-close
{
margin-left:-12px;
border:6px solid transparent;
display:inline-block;
width:0px;
height:0px;
border-left-color: black;
margin-bottom: 2px;
}
/* 改变CheckBox样式*/
input[type='checkbox']{
width: 20px;
height: 20px;
-webkit-appearance:none;
-moz-appearance: none;
border: 1px solid #c9c9c9;
border-radius: 3px;
outline: none;
color:white;
text-align: center;
}
input[type='checkbox']:before
{
content: '√ ';
color:transparent;
}
input[type=checkbox]:checked{
background-color: #30add6;
}
input[type=checkbox]:checked:before{
content: '√';
color:white;
font-weight: bold;
}
</style>
</head>
<body>
<div class="warp">
<ul id="container">
</ul>
</div>
<script type="text/javascript">
//结构
var json={
'0-0':{
'0-0-0':null,
'0-0-1':{
'0-0-1-0':null,
'0-0-1-1':null,
'0-0-1-2':null
},
'0-0-2':null
},
'0-1':{
'0-1-0':null,
'0-1-1':null
},
'0-2':null
};
//这里生成DOM
function generate(json,par)
{
for(var attr in json)
{
var ele=document.createElement('li');
if(!json[attr])
ele.innerHTML=' <input type="checkbox"></input>'+attr;
else
{
ele.innerHTML='<span><span class="switch-open" onclick="toggle(this)"></span><input type="checkbox" onclick="checkChange(this)"></input>'+attr+'</span>';
var nextpar=document.createElement('ul');
ele.appendChild(nextpar);
generate(json[attr],nextpar);
}
par.appendChild(ele);
}
}
generate(json,document.getElementById('container'));
//处理展开和收起
function toggle(eve)
{
var par=eve.parentNode.nextElementSibling;
if(par.style.display=='none')
{
par.style.display='block';
eve.className='switch-open';
}
else
{
par.style.display='none';
eve.className='switch-close';
}
}
//处理全部勾选和全部不选
function checkChange(eve)
{
var oul=eve.parentNode.nextElementSibling;
if(eve.checked)
{
for(var i=0;i<oul.querySelectorAll('input').length;i++)
{
oul.querySelectorAll('input')[i].checked=true;
}
}
else
{
for(var i=0;i<oul.querySelectorAll('input').length;i++)
{
oul.querySelectorAll('input')[i].checked=false;
}
}
}
</script>
</body>
</html>
