html代碼
```
<div class='list'>
...
</div>
```
css代碼
```
<style>
ul {
list-style-type: none;
}
ul li span {
color: red;
border: 1px solid #1890ff;
/*內減*/
width: 15px;
height: 15px;
display: inline-block;
text-align: center;
border-radius: 50%;
vertical-align: middle;
margin-right: 10px;
line-height: 15px;
cursor: default;
}
</style>
```
js
```
var data = [{
name: "IT互聯網",
child: [
{ name: "編程語言", child: [{ name: "java" }, { name: "c#/.net" }, { name: "python" }, { name: "前端開發" }] },
{ name: "移動開發", child: [{ name: "android開發" }, { name: "IOS開發" }] },
{ name: "游戲開發", child: [{ name: "phaser游戲開發" }, { name: "web游戲開發", child: [{ name: "2D游戲" }, { name: "3D游戲" }] }] }
]
},
{
name: "設計創作",
child: [
{ name: "平面設計", child: [{ name: "電商美工" }, { name: "綜合平面設計" }, { name: "攝影后期" }] },
{ name: "UI設計", child: [{ name: "交互設計" }, { name: "webUI設計" }, { name: "游戲UI設計" }] },
{ name: "游戲開發" }
]
},
{
name: "升學考研",
child: [
{ name: "考研" }, { name: "大學" }, { name: "高中" }, { name: "初中" }
]
},
{
name: "職企考證",
child: [
{ name: "公務員", child: [{ name: "教師考試" }, { name: "建筑工程" }] }
]
}
];
$(function() {
// var str = "";
// str += "<ul>";
// for (var i = 0; i < data.length; i++) {
// str += "<li>" + data[i].name + "<li>";//一級目錄
// if (data[i].child) {
// str += "<ul>";
// for (var j = 0; j < data[i].child.length; j++) {
// str += "<li>" + data[i].child[j].name + "</li>"; //二級目錄
// if( data[i].child[j].child){
// str += "<ul>";
// for(var z = 0; z < data[i].child[j].child.length; z++){
// str += "<li>" + data[i].child[j].child[z].name + "</li>"; //三級目錄
// }
// str += "</ul>";
// }
// }
// str += "</ul>";
// }
// }
// str += "</ul>";
// $('.list').html(str);
// function cretaTree(data){
// var str = "";
// str += "<ul>";
// for (var i = 0; i < data.length; i++) {
// str += "<li>" + data[i].name + "<li>";//一級目錄
// if(data[i].child){
// str += cretaTree(data[i].child);//二級目錄
// }
// }
// str += "</ul>";
// return str;
// }
// $('.list').html(cretaTree(data));
function cretaTree(data) {
var str = "";
str += "<ul>";
for (var i = 0; i < data.length; i++) {
str += "<li><span>-</span>" + data[i].name; //一級目錄
if (data[i].child) {
str += cretaTree(data[i].child); //二級目錄
}
str += "</li>"
}
str += "</ul>";
return str;
}
$('.list').html(cretaTree(data));
$('.list ul li').click(function(e) {
e.stopPropagation();
if ($(this).find('ul').is(':visible')) { //判斷有無子集 //冒泡
$(this).find('ul').hide();
$(this).find('span').text('+');
} else {
$(this).find('ul').show();
$(this).find('span').text('-');
}
})
})
```
