html内：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...
html内：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
.side-menu {
width: 300px;
border: 1px solid #ddd;
}
.side-menu ul li {
list-style: none;
}
.side-menu ul li a {
display: block;
text-decoration: none;
color: #222;
border-bottom: 1px solid #ddd;
}
.subnav{
display: none;
}
</style>
<body>
<div class="side-menu"></div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function () {
$.ajax({
type: "GET",
url: "data.json",
dataType: "json",
success:function(res){
var dataArr = res;
var liStr = "";
var oUl = $("<ul></ul>");
var num = 5;
if(dataArr.length>0){
num+=5;
for(var i=0;i<dataArr.length;i++){
if(dataArr[i].childMenu!=null&&dataArr[i].childMenu.length>0){//有子菜单
liStr+="<li><a href=\""+dataArr[i].href+"\"><i class=\""+dataArr[i].iconLeft+"\"></i>"+dataArr[i].name+"<i class=\""+dataArr[i].iconRight+"\"></i></a><ul class=\"subnav\">";
for(var j= 0;j<dataArr[i].childMenu.length;j++){
liStr += getChildMenu(dataArr[i].childMenu[j],num);
}
liStr += "</ul></li>";
}else{//没有子菜单
liStr+="<li><a href=\""+dataArr[i].href+"\"><i class=\""+dataArr[i].iconLeft+"\"></i>"+dataArr[i].name+"<i class=\""+dataArr[i].iconRight+"\"></i></a></li>";
}
}
oUl.html(liStr);
$(".side-menu").append(oUl);
}
}
})
function getChildMenu(dataArr,num){//递归创建子菜单
var subStr = "";
num+=10;
if(dataArr.childMenu!=null&&dataArr.childMenu.length>0){//有子菜单
subStr+="<li><a style=\"padding-left:"+num+"px;\" href=\""+dataArr.href+"\"><i class=\""+dataArr.iconLeft+"\"></i>"+dataArr.name+"<i class=\""+dataArr.iconRight+"\"></i></a><ul class=\"subnav\">";
for(var j= 0;j<dataArr.childMenu.length;j++){
subStr += getChildMenu(dataArr.childMenu[j],num);
}
subStr+= "</ul></li>";
}else{//无子菜单
subStr+="<li><a style=\"padding-left:"+num+"px;\" href=\""+dataArr.href+"\"><i class=\""+DataTransfer.iconLeft+"\"></i>"+dataArr.name+"<i class=\""+dataArr.iconRight+"\"></i></a></li>";
}
return subStr;
}
(function SideMenuHandle(){
$('.side-menu').on("click","li",function(event){
event.stopPropagation();
// console.log($(this).find(".subnav").length)
if($(this).find(".subnav").eq(0).is(":hidden")){
$(this).find(".subnav").eq(0).show();
}else{
$(this).find(".subnav").eq(0).hide();
}
})
})();
})
</script>
</html>
data.json部分：等同于接口返回来的数据
[
{
"name": "一级菜单1",
"iconLeft": "",
"iconRight": "",
"href": "javascript:;",
"childMenu": [
{
"name": "二级菜单1",
"iconLeft": "",
"iconRight": "",
"href": "javascript:;",
"childMenu": [
{
"name": "三级菜单1",
"iconLeft": "",
"iconRight": "",
"href": "javascript:;",
"childMenu": null
}
]
},
{
"name": "二级菜单2",
"iconLeft": "",
"iconRight": "",
"href": "javascript:;",
"childMenu": [
{
"name": "三级菜单2",
"iconLeft": "",
"iconRight": "",
"href": "javascript:;",
"childMenu": null
}
]
}
]
},
{
"name": "一级菜单2",
"iconLeft": "",
"iconRight": "",
"href": "javascript:;",
"childMenu": null
}
]
