转自：http://www.jb51.net/article/71615.htm 侵删
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style type="text/css"> ???body{ ???????padding:0; ???????margin:0; ???} ???ul{ ???????padding: 0; ???????margin:0; ???} ???.navlist { ???????/*margin-left: -30px;*/ ???} ???????.navlist div { ???????padding-left: 15px; ???} ???????.navlist div ul { ???????overflow: hidden; ???????display: none; ???????height: auto; ???} ???????.navlist span { ???????display: block; ???????height: 25px; ???????line-height: 25px; ???????padding-left: 5px; ???????margin: 1px 0; ???????cursor: pointer; ???????border-bottom: 1px solid #CCC; ???} ???????.navlist span:hover { ???????background-color: #e6e6e6; ???????color: #cf0404; ???} ???????.navlist a { ???????color: #333; ???????text-decoration: none; ???} ???????.navlist a:hover { ???????color: #06F; ???} ???????.btn { ???????height: 30px; ???????margin-top: 10px; ???????border-bottom: 1px solid #CCC; ???} ???</style></head><div class="btn"> ???<input name="" type="button" id="btn_open" value="全部展开" /> ???<input name="" type="button" id="btn_close" value="全部收缩" /></div><div id="navlist" class="navlist"></div><body> ???<!-- <div id="menu"></div> --> ???<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> ???<script type="text/javascript"> ???var json = [{ ???????"id": 1, ???????"name": "系统管理", // 菜单名称 ???????"url": "#", //映射URL ???????"icon": "sys-icon", //图标样式 ???????"pid": 0, //父菜单ID ???????"items": [] ???}, { ???????"id": 1, ???????"name": "系统管理1", // 菜单名称 ???????"url": "#", //映射URL ???????"icon": "sys-icon", //图标样式 ???????"pid": 0, //父菜单ID ???????"items": null ???}, { ???????"id": 5, ???????"name": "测试菜单1", ???????"url": "#", ???????"icon": "sys-icon", ???????"pid": 1, ???????"items": [{ ???????????"name": "测试菜单1-1", ???????????"url": "#", //映射URL ???????}, { ???????????"name": "测试菜单1-2", ???????????"items": [{ ???????????????"name": "测试菜单1-2-1", ???????????????"url": "#", //映射URL ???????????}, { ???????????????"name": "测试菜单1-2-2", ???????????????"url": "#", //映射URL ???????????}, { ???????????????"name": "测试菜单1-2-3", ???????????????"url": "#", //映射URL ???????????}] ???????}, ] ???}, { ???????"id": 5, ???????"name": "测试菜单2", ???????"url": "#", ???????"icon": "sys-icon", ???????"pid": 1, ???????"items": [{ ???????????"name": "测试菜单2-1", ???????????"url": "#", //映射URL ???????}, { ???????????"name": "测试菜单2-2", ???????????"url": "#", //映射URL ???????}] ???}, { ???????"name": "测试菜单3", ???????"items": [{ ???????????"name": "测试菜单3-1", ???????????"url": "#", //映射URL ???????????items: [{ ???????????????"name": "测试菜单3-1-1", ???????????????"url": "#", //映射URL ???????????}] ???????}, { ???????????"name": "测试菜单3-2", ???????????"url": "#", //映射URL ???????????items: [{ ???????????????"name": "测试菜单3-2-1", ???????????????"url": "#", //映射URL ???????????}] ???????}, { ???????????"name": "测试菜单3-3", ???????????"url": "#", //映射URL ???????}] ???}, { ???????"name": "测试菜单4", ???}, { ???????"name": "测试菜单5", ???}] ???console.log(json) ???/*递归实现获取无级树数据并生成DOM结构*/ ???var str = ""; ???var forTree = function(o) { ???????????for (var i = 0; i < o.length; i++) { ???????????????var urlstr = ""; ???????????????try { ???????????????????if (typeof o[i]["url"] == "undefined") { ???????????????????????urlstr = "<div><span>" + o[i]["name"] + "</span><ul>"; ???????????????????} else { ???????????????????????urlstr = "<div><span><a href=" + o[i]["url"] + ">" + o[i]["name"] + "</a></span><ul>"; ???????????????????} ???????????????????str += urlstr; ???????????????????if (o[i].items != null) { ???????????????????????forTree(o[i].items); ???????????????????} ???????????????????str += "</ul></div>"; ???????????????} catch (e) {} ???????????} ???????????// console.log(str); ???????????return str; ???????} ???????/*添加无级树*/ ???document.getElementById("navlist").innerHTML = forTree(json); ???/*树形菜单*/ ???var menuTree = function() { ???????????//给有子对象的元素加[+-] ???????????$("#navlist ul").each(function(index, element) { ???????????????// console.log(index, element); ???????????????var ulContent = $(element).html(); ???????????????var spanContent = $(element).siblings("span").html(); ???????????????if (ulContent) { ???????????????????$(element).siblings("span").html("[+] " + spanContent) ???????????????} ???????????}); ???????????$("#navlist").find("div span").click(function() { ???????????????var ul = $(this).siblings("ul"); ???????????????var spanStr = $(this).html(); ???????????????var spanContent = spanStr.substr(3, spanStr.length); ???????????????if (ul.find("div").html() != null) { ???????????????????if (ul.css("display") == "none") { ???????????????????????ul.show(300); ???????????????????????$(this).html("[-] " + spanContent); ???????????????????} else { ???????????????????????ul.hide(300); ???????????????????????$(this).html("[+] " + spanContent); ???????????????????} ???????????????} ???????????}) ???????}() ???????/*展开*/ ???????$("#btn_open").click(function() { ???????????????$("#navlist ul").show(300); ???????????????curzt("-"); ???????????}) ???????????/*收缩*/ ???????$("#btn_close").click(function() { ???????????$("#navlist ul").hide(300); ???????????curzt("+"); ???????}) ???function curzt(v) { ???????$("#navlist span").each(function(index, element) { ???????????var ul = $(this).siblings("ul"); ???????????var spanStr = $(this).html(); ???????????var spanContent = spanStr.substr(3, spanStr.length); ???????????if (ul.find("div").html() != null) { ???????????????$(this).html("[" + v + "] " + spanContent); ???????????} ???????}); ???} ???</script></body></html>
jquery 树形导航菜单无限级
原文地址：https://www.cnblogs.com/Byme/p/9026751.html