贴一个无限下拉菜单代码

周大胖子 · 发表于 2018-10-20 23:48:54

<!DOCTYPE html>
<html>
<head>
<title>制作无限下拉菜单咋整前台JS 【数组嵌套json】后台TP5 </title>
<meta charset="UTF-8" />
<script>
//菜单类 1.盒子id 2.菜单数组
function Menu(boxId, menus){
//创建菜单
this.create = function(level){
var element = document.createElement('ul'),
item = null, //当前项目
title = null; //项目标题
level = level ? level : 0; //当前等级，没有传参数为顶级
for(var i in menus){
if(level == menus[i].gid){
item = document.createElement('li');
title = document.createElement('span');
title.innerHTML = menus[i].title;
item.appendChild(title);
item.appendChild(this.create(menus[i].id));
element.appendChild(item);
}
}
return element;
}
this.box = document.getElementById(boxId);
this.box.appendChild(this.create());
}
window.onload = function(){
var menus = [
{"id" : "2", "gid" : "1", "title" : "客户列表", "statue" : "0", "url" : "/sets/2"},
{"id" : "3", "gid" : "1", "title" : "客户状态", "statue" : "0", "url" : "/sets/3"},
{"id" : "4", "gid" : "3", "title" : "睡着的", "statue" : "0", "url" : "/sets/4"},
{"id" : "5", "gid" : "3", "title" : "发财的", "statue" : "0", "url" : "/sets/5"},
{"id" : "6", "gid" : "4", "title" : "眯着眼睡的", "statue" : "0", "url" : "/sets/6"},
{"id" : "7", "gid" : "0", "title" : "员工管理", "statue" : "0", "url" : "/sets/7"},
{"id" : "8", "gid" : "0", "title" : "等级管理", "statue" : "0", "url" : "/sets/8"},
{"id" : "9", "gid" : "0", "title" : "客户管理2", "statue" : "0", "url" : "/sets/9"},
{"id" : "10", "gid" : "7", "title" : "准备滚蛋的", "statue" : "0", "url" : "/sets/10"},
{"id" : "11", "gid" : "10", "title" : "带着铺盖滚蛋的", "statue" : "0", "url" : "/sets/11"},
{"id" : "12", "gid" : "0", "title" : "系统设置", "statue" : "0", "url" : "/sets/12"},
{"id" : "13", "gid" : "2", "title" : "大海设置", "statue" : "0", "url" : "/sets/13"},
{"id" : "1", "gid" : "0", "title" : "客户管理", "statue" : "0", "url" : "/sets/1"}
];
var menu = new Menu('menus', menus);
}
</script>
</head>
<body>
<div id="menus"></div>
</body>
</html>

复制代码