js控制json⽣成菜单——⾃制菜单（⼀）此⽂档解决以下问题：
1.JSON⽂件的书写⽅式
JSON()的运⽤
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",
"navUrl": "test.html",
"navParentId": 0
}, {
"navId": 2,
"navTitle": "⼀级菜单2",
"navUrl": "test.html",
"navParentId": 0
}, {
"navId": 3,
"navTitle": "⼀级菜单1⼦1",
"navUrl": "test.html",
"navParentId": 1
}, {
"navId": 4,
"navTitle": "⼀级菜单1⼦2",
"navUrl": "test.html",
"navParentId": 1
}, {
"navId": 5,
"navTitle": "⼀级菜单3",
"navUrl": "test.html",
"navParentId": 0
"navTitle": "⼀级菜单2⼦1",
"navUrl": "test.html",
"navParentId": 2
}, {
"navId": 7,
"navTitle": "⼀级菜单3⼦1",
"navUrl": "test.html",
"navParentId": 5
}, {
"navId": 8,
"navTitle": "⼀级菜单2⼦2",
"navUrl": "test.html",
"navParentId": 2
}, {
"navId": 9,
"navTitle": "⼀级菜单4",
"navUrl": "test.html",
"navParentId": 0
}, {
"navId": 10,
"navTitle": "⼀级菜单4⼦1",
"navUrl": "test.html",
"navParentId": 9
}
]
3.navtab.js
1 $(function() {
2 $.getJSON("json/nav.json", function(data) {
3//1.getJSON⽅法获取json⽂件数据，data为json存储的数据对象组
4for(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代表对应的属性值
9if(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_dow 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
30if(data[i][key] == i + 1) {
31//5.判断⾮⼀级菜单项
32//根据该对象的⽗级菜单idli标签，成为其⼦菜单项
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
1body {
2 margin: 0;
3 padding: 0;
4 font-family: "微软雅⿊";
5 font-size: 16px;
6 }
7
8ul,
9li {
10 list-style: none;
11 }
12
13a,
14a:hover,
15a:active,
16a: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;
47 position: relative;
48 width: 40px;
注册页面js特效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值
正⽂结束
发表评论