<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" : "1", "gid" : "0", "title" : "客户管理", "statue" : "0", "url" : "/sets/1"},
{"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"}
]
var menu = new Menu('menus', menus)
}
</script>
</head>
<body>
<div id="menus"></div>
</body>
</html>
这个代码可以无限级别，思路就是寻找当前对象的子对象
改改样式就可以了，如果想设置为点击或者鼠标移动到上面时候展开，只需要给li绑定事件控制子元素ul的display即可，不会写的话追问，多给点分我的更有动力哦。。
1、首先新建一个html文件，命名为test.html，在test.html文件内，引入jquery.min.js库文件，成功加载该文件，才能使用jquery中的方法。
2、在test.html文件内，使用button标签创建一个按钮，按钮名称分别为“刷新页面”。
3、在test.html文件内，设置button标签的id为btn，主要用于下面通过该id获得button对象。
4、在js标签内，使用$(function(){ })方法在页面加载完成时，通过window.location.href获得当前页面的链接，并把链接保存在变量url中。
5、在js标签内，通过id(btn)获得button对象，给它绑定click点击事件，实现当按钮被点击时，使用window.location.href方法跳转至url，从而实现刷新页面的效果。
6、在浏览器打开test.html文件，点击按钮，查看实现的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
<!--
var i = 0
function form( textobj, selectobj, divobj ) { //增加元素
var newHtml = document.createElement('div')
newHtml.id = divobj + i
newHtml.innerHTML = '<input type="text" name="' + textobj + '" \/><select name="' + selectobj + '"><option>请选择<\/option><\/select><a href="javascript:" onclick="del(\'' + ( divobj + i ) + '\')">删除<\/a>'
document.getElementById(divobj).appendChild( newHtml )
i++
}
function del( objs ) { //删除元素
var object = document.getElementById( objs )
object.parentNode.removeChild( object )
}
//-->
</script>
<style>
div{position:relativez-index:0 margin:10px auto}
a{color:#03F text-decoration:none}
</style>
</head>
<body>
<div id="ins">
<input type="text" name="baiyi" />
<select name="zhuli">
<option>请选择</option>
</select>
</div>
<a href="javascript:" onclick="form('baiyi[]', 'zhuli[]', 'ins')">增加</a>
</body>
</html>
