html js 动态添加树形菜单,用html+css+js实现一个无限级树形控件

树形菜单示例

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;

}

//结构

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 injson)

{var ele=document.createElement('li');if(!json[attr])

ele.innerHTML=''+attr;else{

ele.innerHTML=''+attr+'';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')[i].checked=true;

}

}else{for(var i=0;i

{

oul.querySelectorAll('input')[i].checked=false;

}

}

}