jquery 树形导航菜单无限级
Posted 小角色Byme
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 树形导航菜单无限级相关的知识，希望对你有一定的参考价值。
转自：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 树形导航菜单无限级的主要内容，如果未能解决你的问题，请参考以下文章