轉自：http://www.jb51.net/article/71615.htm 侵刪 Document --> ...
轉自：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>
