<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#_0000 a + ul {
display: none;
}
#_0000 a.open + ul {
display: block;
}
#_0000 a{
cursor: pointer;
display: inline-block;
}
#_0000 a.dd:after{
content: "+";
margin-left: 4px;
}
#_0000 a.dd.open:after{
content: "-";
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$.getJSON('https://api.myjson.com/bins/zlxnt', function(data) {
data.sort(function(a,b) {
if (a.PARENT > b.PARENT) return 1;
if (a.PARENT < b.PARENT) return -1;
return 0
})
console.log(JSON.stringify(data));
data.forEach(function(el, i) {
var parentId = el.PARENT;
var parent = document.querySelector("#_"+parentId);
var li;
if(!parent) {
li = $("<li>").appendTo("#_0000");
$("<a>", {text : parentId, "class" : "dd"}).appendTo(li);
parent = $("<ul>", {id : "_"+parentId}).appendTo(li);
}
else {
$(parent).prev("a").addClass("dd");
};
li = $("<li>").appendTo(parent);
$("<a>", {text : el.NAME}).appendTo(li);
$("<ul>", {id : "_"+el.CID}).appendTo(li);
})
})
$("#_0000").on("click", "a", function(event) {
event.preventDefault();
this.classList.toggle("open")
})
});
</script>
</head>
<body>
<ul id="_0000"></ul>
</body>
</html>