|
- <!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>
复制代码
|
|