使用json生成，无限极菜单。 依赖如下：
BootstrapJquerybootstrap-submenu.js插件你可以先访问这里：https://vsn4ik.github.io/bootstrap-submenu/ 了解一下bootstrap-submenu.js 插件，本文例子以bootstrap-submenu.js为基础，根据json生成无限极菜单。 同时，使用了递归。可以先了解一下递归是什么。
代码上传至百度网盘和csdn 链接：http://pan.baidu.com/s/1dFIKNPB 密码：kro0 或者 http://download.csdn.net/detail/u012775558/9814052
生成效果如图：
大致思路 由于一级菜单具有不规则性，在本例中是一级菜单达到5个后自动隐藏，因此本例的实现方法是，根据json先生成了一级菜单，然后再递归生成一级菜单的无限极子菜单。 实现步骤 bootstrap-submenu.js插件的实现方式是，在html中放置了标记父子关系的li、ui标签，然后通过js激活菜单，可以参考该页面 https://vsn4ik.github.io/bootstrap-submenu/ ， 下图是一个截图，可以观察一下li、ui的关系。
因此本例的实现步骤就是，先获取到json数据，然后根据id与父节点id，处理成树形json，然后根据树形json生成html，然后js激活 无限极菜单。
文件结构
test.html内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>json生成无限极菜单</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-submenu.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/bootstrap-submenu.js"></script> <script src="js/nav.js"></script> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="nav1"> <div class="navbar-header"> <a class="navbar-brand" href="#"> 无限极菜单 </a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav" id="systemWebMenu"> </ul> </div> </nav> <script type="text/javascript"> $(document).ready(function () { showTreeFirst(tree);//生成一级菜单 showTree(tree);//生成其他菜单 $('[data-submenu]').submenupicker();//激活多级菜单 }); </script> </body> </html>nav.js内容 menuData 是普通json，其中会有自身id和他的父节点id-menuIdParent
var menuData = [ { "menuId": "1", "title": "系统管理", "menuIdParent": "2" }, { "menuId": "2", "title": "决策分析", "menuIdParent": "0" }, { "menuId": "3", "title": "运营决策", "menuIdParent": "0" }, { "menuId": "4", "title": "知识库", "menuIdParent": "0" }, { "menuId": "5", "title": "运营分析", "menuIdParent": "3" }, { "menuId": "6", "title": "决策分析2", "menuIdParent": "3" }, { "menuId": "7", "title": "运营管理", "menuIdParent": "3" }, { "menuId": "8", "title": "决策管理", "menuIdParent": "3" }, { "menuId": "9", "title": "决策支持", "menuIdParent": "4" }, { "menuId": "10", "title": "人员信息", "menuIdParent": "9" }, { "menuId": "11", "title": "人员管理", "menuIdParent": "9" }, { "menuId": "12", "title": "人员排班", "menuIdParent": "9" }, { "menuId": "13", "title": "系统菜单", "menuIdParent": "10" }, { "menuId": "14", "title": "模块菜单", "menuIdParent": "10" }, { "menuId": "15", "title": "菜单编辑", "menuIdParent": "10" }, { "menuId": "16", "title": "地点管理", "menuIdParent": "14" }, { "menuId": "17", "title": "科室管理", "menuIdParent": "14" }, { "menuId": "18", "title": "图片管理", "menuIdParent": "0" }, { "menuId": "19", "title": "存储信息", "menuIdParent": "0" }, { "menuId": "20", "title": "人员信息", "menuIdParent": "0" }, { "menuId": "21", "title": "机构信息", "menuIdParent": "0" }, { "menuId": "22", "title": "机构管理", "menuIdParent": "21" }, { "menuId": "23", "title": "机构添加", "menuIdParent": "21" } ]; /*普通json 转成树形json*/ function listToTree(list, pid) { var ret = [];//一个存放结果的临时数组 for (var i in list) { if (list[i].menuIdParent == pid) {//如果当前项的父id等于要查找的父id，进行递归 list[i].children = listToTree(list, list[i].menuId); ret.push(list[i]);//把当前项保存到临时数组中 } } return ret;//递归结束后返回结果 } var tree = listToTree(menuData, 0);//调用函数，传入要转换的普通json和树中顶级元素的pid /*顶级元素的pid：在本例中为0，相当于一级菜单的父节点编号为0*/ /*根据处理过的树形json数据生成一级菜单*/ function showTreeFirst(data) { var dataLength = data.length; if (dataLength < 6) {//最多生成五个菜单，其余隐藏 // console.log("dataLength < 6") for (var i = 0; i < dataLength; i++) { if (data[i].children.length) {//如果有子集 var html = ' <li class="dropdown"> ' + '<a href="#" data-toggle="dropdown" id="' + data[i].menuId+ '" data-submenu="" > ' + data[i].title + ' </a>' + ' <ul class="dropdown-menu" id="submenu_' + data[i].menuId + '"></ul> </li> '; $("#systemWebMenu").append(html); } else { var html = ' <li> <a href="#" data-toggle="dropdown" data-submenu="" id="' + data[i].menuId + '" > ' + data[i].title + ' </a> </li> '; $("#systemWebMenu").append(html); } } } else {//最多生成五个菜单，其余隐藏 /* 先成前五个菜单*/ for (var i = 0; i < 5; i++) { if (data[i].children.length) {//如果有子集 var html = ' <li class="dropdown">' + ' <a href="#" data-toggle="dropdown" id="' + data[i].menuId + '" data-submenu="" > ' + data[i].title + ' </a> ' + '<ul class="dropdown-menu" id="submenu_' + data[i].menuId + '"></ul> </li> '; $("#systemWebMenu").append(html); } else { var html = ' <li> <a href="#" data-toggle="dropdown" data-submenu="" id="' + data[i].menuId +'" > ' + data[i].title + ' </a> </li> '; $("#systemWebMenu").append(html); } } /* 生成“更多”按钮*/ var html = ' <li class="dropdown"> <a href="#" data-toggle="dropdown" data-submenu="" id="' + data[i].menuId + '" menutitle="' + data[i].title+'">更多<strong class="caret"></strong> </a> ' + '<ul class="dropdown-menu" id="moreDropdownMenu"> </ul> </li>'; $("#systemWebMenu").append(html); /* 生成“更多”按钮下的其他一级隐藏菜单*/ for (var i = 5; i < dataLength; i++) { if (data[i].children.length) {//如果有子集 var html = ' <li class="dropdown-submenu"> <a id="'+ data[i].menuId +'" >' + data[i].title + '</a> ' + '<ul class="dropdown-menu" id="submenu_' + data[i].menuId + '"> </ul>' $("#moreDropdownMenu").append(html); } else { var html = '<li><a id="'+data[i].menuId+'" >' + data[i].title + '</a> </li>' $("#moreDropdownMenu").append(html); } } } } /*根据处理过的树形json数据递归生成一级菜单以外的其他菜单*/ function showTree(data) { for (var i = 0; i < data.length; i++) { if (data[i].children.length) {//如果有子集 /* 先判断父节点是否存在*/ if ($("#submenu_" + data[i].menuIdParent).size() == 0) { showTree(data[i].children);//递归调用子集 } else { var html = '<li class="dropdown-submenu">' + ' <a id="'+data[i].menuId+'" >' + data[i].title + '</a>' + '<ul class="dropdown-menu" id="submenu_'+data[i].menuId+'"> </ul>' $("#submenu_"+data[i].menuIdParent).append(html); showTree(data[i].children);//递归调用子集 } } else {//没有子集直接显示 var html = '<li><a id="'+data[i].menuId+'">'+data[i].title+'</a> </li>' $("#submenu_" + data[i].menuIdParent).append(html); } } }