HTML
<!DOCTYPE html>
<html>
<head>
<title>树</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body onselectstart="return false;">
<div id="container"></div>
<form>
id<input type="text" class="writer" id="id">
name<input type="text" class="writer" id="name" autocomplete="off">
pid<input type="text" class="writer" id="pid">
<div id="btn">提交</div>
</form>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</body>
</html>
css
body{
background-color: #eee;
padding: 0;
margin: 0;
}
container{
position: relative;
margin: 0 auto;
width: 500px;
height: 700px;
}
li{
list-style: none;
font-size: 36px;
cursor: default;
}
span{
display: inline-block;
background-image: url(img/tagR.png);
background-size: 36px 36px;
width: 36px;
height: 36px;
cursor: pointer;
transition: 0.5s;
transform: rotate(90deg);
}
container input{
zoom: 200%;
cursor: pointer;
}
input+label{
display: none;
width: 25px;
height: 25px;
cursor: pointer;
background: #1890ff;
border: 1px solid #1890ff;
border-radius: 5px;
margin-right: 8px;
margin-left: 5px;
top: -5px;
position: relative;
}
input:checked +label{
line-height: 25px;
display: inline-block;
text-align: center;
font-size: 16px;
color: white;
}
.writer{
position: relative;
width: 200px;
height: 30px;
font-size: 20px;
}
form{
margin-left: 550px;
font-size: 24px;
}
btn{
display: inline-block;
margin-left: 100px;
cursor: pointer;
border: 2px solid #9e9e9ead;
}
btn:hover{
transition: 0.5s;
box-shadow: 4px 4px #9e9e9e;
}
jQuery
var tree = [
{id:1,name:'小张',pid:0},
{id:2,name:'小李',pid:1},
{id:3,name:'小花',pid:1},
{id:4,name:'小明',pid:2},
{id:5,name:'小华',pid:0},
{id:6,name:'小牛',pid:5},
{id:7,name:'小权',pid:5},
{id:8,name:'小哥',pid:6},
{id:9,name:'李华',pid:6},
{id:10,name:'小王',pid:4},
];
var menus = '';
function getDate(id,arry){
var childArry = getParentArry(id,arry);
if(childArry.length>0){
menus +='<ul>';
for(var i in childArry){
menus += '<li><span></span><input type="checkbox" id="color'+i+'"><label for="color">√</label>'+childArry[i].name;
getDate(childArry[i].id,arry);
menus +='</li>';
}
menus +='</ul>';
}
}
function getParentArry(id,arry){
var newArry = [];
for(var i in arry){
if(arry[i].pid==id){
newArry.push(arry[i]);
}
}
return newArry;
}
+function(){
getDate(0,tree);
$('#container').append(menus);
click();
id();
}();
function id(){
$('form').find('input').eq(0).val(Number(tree.length)+1);
}
function click(){
var span = document.getElementsByTagName('span');
var input = document.getElementById('container').getElementsByTagName('input');
var label = document.getElementsByTagName('label');
var p = [];
+function(){
for(var i=0;i<span.length;i++){
p[i] = 1;
}
}();
for(let i=0;i<span.length;i++){
span[i].onclick = function(){
if(p[i]==1){
span[i].style.transform = 'rotate(0deg)';
$(span[i]).nextAll().hide(500);
p[i] = 0;
}
else{
if(!$(span[i]).next().prop('checked')){
span[i].style.transform = 'rotate(90deg)';
$(span[i]).next().next().next().show(500);
$(span[i]).next().show(500);
}
else{
span[i].style.transform = 'rotate(90deg)';
$(span[i]).next().next().next().show(500);
$(span[i]).next().next().show(500);
}
p[i] = 1;
}
}
}
for(let i=0;i<input.length;i++){
input[i].onclick = function(){
$(input[i]).prop('checked','true');
$(input[i]).css('display','none');
$(input[i]).siblings().find(input).css('display','none');
$(input[i]).siblings().find(input).prop('checked','true');
}
}
for(let i=0;i<input.length;i++){
label[i].onclick = function(){
$(input[i]).css('display','inline-block');
$(input[i]).siblings().find(input).prop('checked','');
$(input[i]).siblings().find(input).css('display','inline-block');
$(input[i]).prop('checked','');
}
}
}
('#id').val()!=''&&
('#pid').val()!=''&&Number(
('#container').empty();
tree.push({id:Number(('#name').val(),pid:Number(
('#container').append(menus);
click();
id();
('#pid').val('');
}
else{
alert('输入错误');
}
});
