<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul,li{
list-style: none;
}
ul{
padding-left:20px;
}
.close{
display: inline-block;
15px;
height:15px;
background: url("close.png") no-repeat center;
background-size: contain;
}
.open{
display: inline-block;
15px;
height:15px;
background: url("open.png") no-repeat center;
background-size: contain;
}
.leaf{
display: inline-block;
15px;
height:15px;
background: url("leaf.png") no-repeat center;
background-size: contain;
}
.leafName{
color:green;
padding-left:10px;
padding-right:10px;
}
.openTrue{
color:gray;
}
</style>
</head>
<body>
<div id="tree"></div>
<script type="text/javascript" src="../../../static/plugins/jquery/jquery-1.9.1.js"></script>
<script>
var arr = [
{
name: "父节点1 - 展开",open:true,
children: [
{
name: "父节点11 - 折叠",
children: [
{name: "叶子节点111", nid: "nid"},
{name: "叶子节点112",},
{name: "叶子节点113"},
{name: "叶子节点114"}
]
},
{
name: "父节点12 - 折叠",
children: [
{name: "叶子节点121"},
{name: "叶子节点122"},
{name: "叶子节点123"},
{name: "叶子节点124"}
]
},
{name: "父节点13 - 没有子节点", isParent: true}
]
},
{
name: "父节点2 - 折叠",
children: [
{
name: "父节点21 - 展开",
children: [
{name: "叶子节点211"},
{name: "叶子节点212"},
{name: "叶子节点213"},
{name: "叶子节点214"}
]
},
{
name: "父节点22 - 折叠",
children: [
{name: "叶子节点221"},
{name: "叶子节点222"},
{name: "叶子节点223"},
{name: "叶子节点224"}
]
},
{
name: "父节点23 - 折叠",
children: [
{name: "叶子节点231", children: [
{name: "叶子节点231", children: [
{name: "叶子节点231"},
{name: "叶子节点232"},
{name: "叶子节点233"},
{name: "叶子节点234",children: [
{name: "叶子节点231"},
{name: "叶子节点232"},
{name: "叶子节点233"},
{name: "叶子节点234",children: [
{name: "叶子节点231"},
{name: "叶子节点232"},
{name: "叶子节点233"},
{name: "叶子节点234",children: [
{name: "叶子节点231"},
{name: "叶子节点232"},
{name: "叶子节点233"},
{name: "叶子节点234"}
]}
]}
]}
]},
{name: "叶子节点232"},
{name: "叶子节点233"},
{name: "叶子节点234"}
]},
{name: "叶子节点232"},
{name: "叶子节点233"},
{name: "叶子节点234"}
]
}
]
},
{name: "父节点3 - 没有子节点", isParent: true}
];
var str=""
function createTree(arr){
if(arr){
var children=arr;
str+="<ul>";
for(var j=0;j<children.length;j++){
str+="<li>"
if(children[j]["children"]){
if(children[j]["open"]){
str+="<div open='true'><span class='close'></span><span class='openTrue'>"+children[j]["name"]+"</span></div>";
}else{
str+="<div open='false'><span class='open'></span><span class='openTrue'>"+children[j]["name"]+"</span></div>";
}
}else{
str+="<div><span class='leaf'></span><span class='leafName'>"+children[j]["name"]+"</div>";
}
createTree(children[j]["children"])
str+="</li>"
}
str+="</ul>";
}
return str;
}
$("#tree").html(createTree(arr))
$("[open=true]").each(function(){
$(this).next().show()
})
$("[open=false]").each(function(){
$(this).next().hide()
})
$(document).on("click",".close",function(){
$(this).parent().next().hide()
$(this).addClass("open").removeClass("close")
})
$(document).on("click",".open",function(){
$(this).parent().next().show()
$(this).addClass("close").removeClass("open")
})
</script>
</body>
</html>