js控制json生成菜單——自制菜單（一）
阿新 • • 發佈：2018-08-17
round 名稱 訪問 margin style wid 事件 over caret
此文檔解決以下問題：
1.JSON文件的書寫方式
2.jQuery.getJSON()的運用
3.jQuery.each()的運用
4.jQuery的DOM 操作方法之一：.append()的運用
5.jQuery的遍歷方法之一：.children()的運用
6.jQuery的遍歷方法之一：.siblings()的運用
7.jQuery的綁定事件處理器之一：.on()的運用
8.jQuery的滑動特效:.slideToggle()、.slideUp()、.slideDown()的運用
最終效果：
1.navtab.html
1 <!DOCTYPE html>2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>利用jq和json生成菜單</title> 7 <link type="text/css" rel="stylesheet" href="css/navtab.css" /> 8 <script src="js/jquery_3.3.1_jquery.min.js"></script> 9 <script src="js/navtab.js"></script> 10 </head> 11 12 <body> 13 14 <div id="nav_box"> 15 <ul id="nav-mainbox"> 16 <li class="nav_head"> 17 <span class="shead"><img src="img/nav/home.png"/></span> 18 <a href="#">首頁</a> 19 <span class="sfoot"><img src=""/></span> 20 </li> 21 </ul> 22 </div> 23 24 </body> 25 26 </html>
2.nav.json
[
{
"navId": 1,
"navTitle": "一級菜單1",
"navParentId": 0
}, {
"navId": 2,
"navTitle": "一級菜單2",
"navParentId": 0
}, {
"navId": 3,
"navTitle": "一級菜單1子1",
"navParentId": 1
}, {
"navId": 4,
"navTitle": "一級菜單1子2",
"navParentId": 1
}, {
"navId": 5,
"navTitle": "一級菜單3",
"navParentId": 0
}, {
"navId": 6,
"navTitle": "一級菜單2子1",
"navParentId": 2
}, {
"navId": 7,
"navTitle": "一級菜單3子1",
"navParentId": 5
}, {
"navId": 8,
"navTitle": "一級菜單2子2",
"navParentId": 2
}, {
"navId": 9,
"navTitle": "一級菜單4",
"navParentId": 0
}, {
"navId": 10,
"navTitle": "一級菜單4子1",
"navParentId": 9
}
3.navtab.js
1 $(function() { 2 $.getJSON("json/nav.json", function(data) { 3 //1.getJSON方法獲取json文件數據，data為json存儲的數據對象組 4 for(var i = 0; i < data.length; i++) { 5 //2.循環訪問data數組中的每個對象，長度為data.length 6 $.each(data[i], function(key, val) { 7 //3.遍歷每個data對象的鍵值對，遍歷次數為3，原因json文件有3個鍵值對 8 //key代表屬性名，val代表對應的屬性值 9 if(data[i][key] == 0) { 10 //4.判斷該data對象是否存在菜單的父級菜單id為0 11 //為0 則為一級菜單，生成li標簽，顯示菜單項名稱data[i]["navTitle"] 12 //同時添加li的class為data[i]["navId"] 13 $("#nav-mainbox").append("<li class=‘" + data[i]["navId"] + "‘><span class=‘shead‘><img src=‘img/nav/" + data[i]["navId"] + ".png‘/></span><a>" + data[i]["navTitle"] + "</a><span class=‘sfoot‘><img src=‘img/nav/icon_caret_down_g.png‘/></span><ul></ul></li>"); 14 15 //7.頁面首次加載時，只有第一項一級菜單的子菜單顯示 16 //其他子菜單項隱藏 17 $("li.1").children("ul").slideDown(); 18 $("li.1").siblings().children("ul").slideUp(); 19 20 //6.為一級菜單綁定點擊事件 21 //一級菜單項可以滑動顯示或隱藏子菜單項 22 //同時，當前菜單顯示，則其他都隱藏 23 $("." + data[i]["navId"]).on("click", function() { 24 $(this).children("ul").slideToggle(); 25 $(this).siblings().children("ul").slideUp(); 26 }) 27 28 } 29 30 if(data[i][key] == i + 1) { 31 //5.判斷非一級菜單項 32 //根據該對象的父級菜單id找li標簽，成為其子菜單項 33 $("." + data[i]["navParentId"]).find("ul").append("<li class=‘" + data[i]["navId"] + "‘><a href=‘" + data[i]["navUrl"] + "‘>" + data[i]["navTitle"] + "</a></li>"); 34 } 35 }); 36 37 } 38 }) 39 });
4.navtab.css
1 body { 2 margin: 0; 3 padding: 0; 4 font-family: "微軟雅黑"; 5 font-size: 16px; 6 } 7 8 ul, 9 li { 10 list-style: none; 11 } 12 13 a, 14 a:hover, 15 a:active, 16 a:link { 17 text-decoration: none; 18 color: #3d3d3d; 19 } 20 21 #nav_box { 22 width: 220px; 23 height: 100%; 24 25 } 26 27 #nav_box #nav-mainbox { 28 padding: 0; 29 30 } 31 32 #nav-mainbox li { 33 background-color: #f2f2f2; 34 color: #333; 35 font-size: 14px; 36 position: relative; 37 line-height: 44px; 38 cursor: pointer; 39 border-bottom: 1px solid #dedede; 40 border-right: 1px solid #dedede; 41 42 } 43 #nav-mainbox li:hover{ 44 background-color: #ADADAD; 45 } 46 .shead{ 47 position: relative; 48 width: 40px; 49 height: 40px; 50 top: 10px; 51 padding: 10px; 52 53 } 54 .sfoot{ 55 position: relative; 56 width: 40px; 57 height: 40px; 58 margin-left: 70px; 59 60 } 61 62 #nav-mainbox li ul{ 63 padding: 0; 64 } 65 66 #nav-mainbox li ul li { 67 position: relative; 68 padding-left: 70px; 69 background-color: white; 70 border-bottom: 1px solid #dedede; 71 border-right: 1px solid #dedede; 72 } 73 #nav-mainbox li ul li:hover{ 74 background-color: #ccc; 75 }
註意：一級菜單前面的icon的文件名稱是其對應json文件中的navId值
正文結束！！！！！
js控制json生成菜單——自制菜單（一）