<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生js动态生成树形菜单 </title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="menuTree" class="menuTree"></div>
</body>
<style>
.menuTree div {
padding-left: 20px;
}
.menuTree div ul {
overflow: hidden;
display: none;
height: auto;
}
.menuTree span {
display: block;
height: 25px;
line-height: 25px;
padding-left: 5px;
margin: 1px 0;
cursor: pointer;
border-bottom: 1px solid #CCC;
}
.menuTree span:hover {
background-color: #e6e6e6;
color: #cf0404;
}
.menuTree a {
color: #333;
text-decoration: none;
}
.menuTree a:hover {
color: #06F;
}
.btn {
height: 30px;
margin-top: 10px;
border-bottom: 1px solid #CCC;
}
</style>
<script type="text/javascript">
var json = [{
"name": "1级菜单",
"list": [{
"name": "2级菜单",
"url": "/url1"
},
{
"name": "2级菜单",
"list": [{
"name": "3级菜单",
"list": [{
"name": "4级菜单",
"url": "/url111"
}, {
"name": "4级菜单",
"list": [{
"name": "5级菜单",
"url": "/url1111"
}, {
"name": "5级菜单",
"url": "/url1112"
}]
}]
},
{
"name": "3级菜单",
"url": "/url13"
},
{
"name": "3级菜单",
"url": "/url14"
}
]
},
{
"name": "2级菜单",
"url": "/url3"
}
]
},
{
"name": "1级菜单",
"list": [{
"name": "2级菜单",
"url": "/url1"
},
{
"name": "2级菜单",
"list": [{
"name": "3级菜单",
"url": "/url111"
},
{
"name": "3级菜单",
"url": "/url112"
}
]
},
]
},
{
"name": "1级菜单",
"list": [{
"name": "2级菜单",
"url": "/url1"
},
{
"name": "2级菜单",
"url": "/url2"
}
]
},
{
"name": "1级菜单"
}
]
/*递归实现获取多级树数据并生成DOM结构*/
var str = "";
var forTree = function (o) {
for (var i = 0; i < o.length; i++) {
var urlstr = "";
try {
if (typeof o[i]["url"] == "undefined") {
urlstr = "<div><span>" + o[i]["name"] + "</span><ul>";
} else {
urlstr = "<div><span><a href=" + o[i]["url"] + ">" + o[i]["name"] + "</a></span><ul>";
}
str += urlstr;
if (o[i]["list"] != null) {
forTree(o[i]["list"]);
}
str += "</ul></div>";
} catch (e) {}
}
return str;
}
/*添加多级树*/
document.getElementById("menuTree").innerHTML = forTree(json);
/*树形菜单*/
var menuTree = function () {
//所有父元素加[+-]
$("#menuTree ul").each(function (index, element) {
var ulContent = $(element).html();
var spanContent = $(element).siblings("span").html();
if (ulContent) {
$(element).siblings("span").html("[+] " + spanContent)
}
});
$("#menuTree").find("div span").click(function () {
var ul = $(this).siblings("ul");
var spanStr = $(this).html();
var spanContent = spanStr.substr(3, spanStr.length);
if (ul.find("div").html() != null) {
if (ul.css("display") == "none") {
ul.show(300);
$(this).html("[-] " + spanContent);
} else {
ul.hide(300);
$(this).html("[+] " + spanContent);
}
}
})
}()
/*展开*/
$("#btn_open").click(function () {
$("#menuTree ul").show(300);
curzt("-");
})
/*收缩*/
$("#btn_close").click(function () {
$("#menuTree ul").hide(300);
curzt("+");
})
function curzt(v) {
$("#menuTree span").each(function (index, element) {
var ul = $(this).siblings("ul");
var spanStr = $(this).html();
var spanContent = spanStr.substr(3, spanStr.length);
if (ul.find("div").html() != null) {
$(this).html("[" + v + "] " + spanContent);
}
});
}
</script>
</html>
效果图