用jquery根据json动态创建多级菜单导航（by https://www.cnblogs.com/fatty-yu/p/7088955.html）
Posted Miss.xu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用jquery根据json动态创建多级菜单导航（by https://www.cnblogs.com/fatty-yu/p/7088955.html）相关的知识，希望对你有一定的参考价值。
html结构：
<section class="sidebar"></setion>
json:
1 { 2 "liClass": "active treeview", 3 "link": "index2.html", 4 "label": "结构预览", 5 "iClass": "\'fa fa-dashboard\'", 6 "children": [] 7 }, 8 { 9 "liClass": "treeview", 10 "link": "#", 11 "label": "案例", 12 "iClass": "\'fa fa-files-o\'", 13 "spanClass": "pull-right-container", 14 "spanChildIClass": "label label-primary pull-right", 15 "children": [ 16 { 17 "ulClass": "treeview-menu", 18 "children": [ 19 { 20 "liClass": "treeview", 21 "link": "#", 22 "label": “文字", 23 "iClass": "\'fa fa-circle-o\'", 24 "children": [] 25 }, 26 { 27 "liClass": "treeview", 28 "link": "#", 29 "label": "文字", 30 "iClass": "\'fa fa-circle-o\'", 31 "children": [] 32 }, 33 { 34 "liClass": "treeview", 35 "link": "#", 36 "label": "文字", 37 "iClass": "\'fa fa-circle-o\'", 38 "children": [] 39 }, 40 { 41 "liClass": "treeview", 42 "link": "#", 43 "label": "文字", 44 "iClass": "\'fa fa-circle-o\'", 45 "children": [] 46 }, 47 { 48 "liClass": "treeview", 49 "link": "#", 50 "label": "文字", 51 "iClass": "\'fa fa-circle-o\'", 52 "children": [] 53 }, 54 { 55 "liClass": "treeview", 56 "link": "#", 57 "label": "文字", 58 "iClass": "\'fa fa-circle-o\'", 59 "children": [] 60 }, 61 { 62 "liClass": "treeview", 63 "link": "#", 64 "label": "文字", 65 "iClass": "\'fa fa-circle-o\'", 66 "children": [] 67 }, 68 { 69 "liClass": "treeview", 70 "link": "#", 71 "label": "文字", 72 "iClass": "\'fa fa-circle-o\'", 73 "children": [] 74 }, 75 { 76 "liClass": "treeview", 77 "link": "#", 78 "label": "文字", 79 "iClass": "\'fa fa-circle-o\'", 80 "children": [] 81 }, 82 { 83 "liClass": "treeview", 84 "link": "#", 85 "label": "货商价格影响、环比", 86 "iClass": "\'fa fa-circle-o\'", 87 "children": [] 88 }, 89 { 90 "liClass": "treeview", 91 "link": "#", 92 "label": "文字", 93 "iClass": "\'fa fa-circle-o\'", 94 "children": [] 95 }, 96 { 97 "liClass": "treeview", 98 "link": "#", 99 "label": "文字", 100 "iClass": "\'fa fa-circle-o\'", 101 "children": [] 102 }, 103 { 104 "liClass": "treeview", 105 "link": "#", 106 "label": "文字", 107 "iClass": "\'fa fa-circle-o\'", 108 "children": [] 109 }, 110 { 111 "liClass": "treeview", 112 "link": "#", 113 "label": "1.0.01", 114 "iClass": "\'fa fa-circle-o\'", 115 "children": [] 116 }, 117 { 118 "liClass": "treeview", 119 "link": "#", 120 "label": "1.2.11", 121 "iClass": "\'fa fa-circle-o\'", 122 "children": [] 123 } 124 ] 125 } 126 ] 127 }, 128 { 129 "liClass": "treeview", 130 "link": "#", 131 "label": "文字", 132 "iClass": "\'fa fa-share\'", 133 "spanClass": "pull-right-container", 134 "spanChildIClass": "fa fa-angle-left pull-right", 135 "children": [ 136 { 137 "ulClass": "treeview-menu", 138 "children": [ 139 { 140 "liClass": "treeview", 141 "link": "#", 142 "label": "文字", 143 "iClass": "\'fa fa-circle-o\'", 144 "spanClass": "pull-right-container", 145 "spanChildIClass": "fa fa-angle-left pull-right", 146 "children": [ 147 { 148 "ulClass": "treeview-menu", 149 "children": [ 150 { 151 "liClass": "treeview", 152 "link": "#", 153 "label": "文字", 154 "iClass": "\'fa fa-circle-o\'", 155 "spanClass": "pull-right-container", 156 "spanChildIClass": "fa fa-angle-left pull-right", 157 "children": [ 158 { 159 "ulClass": "treeview-menu", 160 "children": [ 161 { 162 "liClass": "treeview", 163 "link": "#", 164 "label": "文字", 165 "iClass": "\'fa fa-circle-o\'", 166 "children": [] 167 }, 168 { 169 "liClass": "treeview", 170 "link": "#", 171 "label": "文字", 172 "iClass": "\'fa fa-circle-o\'", 173 "children": [] 174 }, 175 { 176 "liClass": "treeview", 177 "link": "#", 178 "label": "文字", 179 "iClass": "\'fa fa-circle-o\'", 180 "children": [] 181 }, 182 { 183 "liClass": "treeview", 184 "link": "#", 185 "label": "文字", 186 "iClass": "\'fa fa-circle-o\'", 187 "children": [] 188 }, 189 { 190 "liClass": "treeview", 191 "link": "#", 192 "label": "文字", 193 "iClass": "\'fa fa-circle-o\'", 194 "children": [] 195 }, 196 { 197 "liClass": "treeview", 198 "link": "#", 199 "label": "文字", 200 "iClass": "\'fa fa-circle-o\'", 201 "children": [] 202 }, 203 { 204 "liClass": "treeview", 205 "link": "#", 206 "label": "文字", 207 "iClass": "\'fa fa-circle-o\'", 208 "children": [] 209 }, 210 { 211 "liClass": "treeview", 212 "link": "#", 213 "label": "文字", 214 "iClass": "\'fa fa-circle-o\'", 215 "children": [] 216 } 217 ] 218 } 219 ] 220 } 221 ] 222 } 223 ] 224 }, 225 { 226 "liClass": "treeview", 227 "link": "#", 228 "label": "文字", 229 "iClass": "\'fa fa-circle-o\'", 230 "spanClass": "pull-right-container", 231 "spanChildIClass": "fa fa-angle-left pull-right", 232 "children": [ 233 { 234 "ulClass": "treeview-menu", 235 "children": [ 236 { 237 "liClass": "treeview", 238 "link": "#", 239 "label": "文字", 240 "iClass": "\'fa fa-circle-o\'", 241 "spanClass": "pull-right-container", 242 "spanChildIClass": "fa fa-angle-left pull-right", 243 "children": [ 244 { 245 "ulClass": "treeview-menu", 246 "children": [ 247 { 248 "type": "li", 249 "liClass": "treeview", 250 "link": "#", 251 "label": "文字", 252 "iClass": "\'fa fa-circle-o\'", 253 "children": [] 254 }, 255 { 256 "liClass": "treeview", 257 "link": "#", 258 "label": "文字", 259 "iClass": "\'fa fa-circle-o\'", 260 "children": [] 261 }, 262 { 263 "liClass": "treeview", 264 "link": "#", 265 "label": "文字", 266 "iClass": "\'fa fa-circle-o\'", 267 "children": [] 268 } 269 ] 270 } 271 ] 272 } 273 ] 274 } 275 ] 276 }, 277 { 278 "liClass": "treeview", 279 "link": "#", 280 "label": "文字", 281 "iClass": "\'fa fa-circle-o\'", 282 "spanClass": "pull-right-container", 283 "spanChildIClass": "fa fa-angle-left pull-right", 284 "children": [ 285 { 286 "ulClass": "treeview-menu", 287 "children": [ 288 { 289 "liClass": "treeview", 290 "link": "#", 291 "label": "文字", 292 "iClass": "\'fa fa-circle-o\'", 293 "spanClass": "pull-right-container", 294 "spanChildIClass": "fa fa-angle-left pull-right", 295 "children": [ 296 { 297 "ulClass": "treeview-menu", 298 "children": [ 299 { 300 "liClass": "treeview", 301 "link": "#", 302 "label": "文字", 303 "iClass": "\'fa fa-circle-o\'", 304 "children": [] 305 }, 306 { 307 "liClass": "treeview", 308 "link": "#", 309 "label": "文字", 310 "iClass": "\'fa fa-circle-o\'", 311 "children": [] 312 } 313 ] 314 } 315 ] 316 }, 317 { 318 "liClass": "treeview", 319 "link": "#", 320 "label": "文字", 321 "iClass": "\'fa fa-circle-o\'", 322 "spanClass": "pull-right-container", 323 "spanChildIClass": "fa fa-angle-left pull-right", 324 "children": [ 325 { 326 "ulClass": "treeview-menu", 327 "children": [ 328 { 329 "liClass": "treeview", 330 "link": "#", 331 "label": "文字", 332 "iClass": "\'fa fa-circle-o\'", 333 "children": [] 334 }, 335 { 336 "liClass": "treeview", 337 "link": "#", 338 "label": "文字", 339 "iClass": "\'fa fa-circle-o\'", 340 "children": [] 341 }, 342 { 343 "liClass": "treeview", 344 "link": "#", 345 "label": "文字", 346 "iClass": "\'fa fa-circle-o\'", 347 "children": [] 348 }, 349 { 350 "liClass": "treeview", 351 "link": "#", 352 "label": "文字", 353 "iClass": "\'fa fa-circle-o\'", 354 "children": [] 355 }, 356 { 357 "liClass": "treeview", 358 "link": "#", 359 "label": "文字", 360 "iClass": "\'fa fa-circle-o\'", 361 "children": [] 362 }, 363 { 364 "liClass": "treeview", 365 "link": "#", 366 "label": "文字", 367 "iClass": "\'fa fa-circle-o\'", 368 "children": [] 369 } 370 ] 371 } 372 ] 373 } 374 ] 375 } 376 ] 377 } 378 ] 379 } 380 ] 381 }, 382 383 json数据
js代码
1 /** 2 * Created on 2017/6/27. 3 */ 4 $(function () { 5 $.getJSON({ 6 type: "get", 7 url: "dist/json/nav.json", 8 success: function (data) { 9 var showList = $("<ul class=\'" + data.ulClass + "\'><li class=\'header\'>主导航</li></ul>"); 10 showAll(data, showList); 11 $(".sidebar").append(showList); 12 } 13 }); 14 //data为json数据 15 //parent为要组合成html的容器 16 function showAll(data, parent) { 17 $.each(data.children, function (index, fatherLi) {//遍历数据集 18 var li1 = $("<li class=\'" + fatherLi.liClass + "\'><a href=\'" + fatherLi.link + "\'><i class=" + fatherLi.iClass + "></i>" + fatherLi.label + "</a></li>");//没有children的初始li结构 19 var li2 = $("<li class=\'" + fatherLi.liClass + "\'><a href=\'" + fatherLi.link + "\'><i class=" + fatherLi.iClass + "></i>" + fatherLi.label + "<span class=\'" + fatherLi.spanClass + "\'><i class=\'" + fatherLi.spanChildIClass + "\'></i></span>" + "</a></li>");//有children的初始li结构 20 //console.log($(li1).html()); 21 //console.log($(li2).html()); 22 if (fatherLi.children.length > 0) { //如果有子节点，则遍历该子节点 23 var ul = $("<ul class=\'" + fatherLi.children[0].ulClass + "\'></ul>"); 24 $(li2).append(ul).appendTo(parent);//将li的初始化选择好，并马上添加带类名的ul子节点，并且将这个li添加到父亲节点中 25 showAll(fatherLi.children[0], $(li2).children().eq(1));//将空白的ul作为下一个递归遍历的父亲节点传入，递归调用showAll函数 26 } else { 27 $(li1).appendTo(parent);//如果该节点没有子节点，则直接将该节点li以及文本创建好直接添加到父亲节点中 28 } 29 }); 30 } 31 }); 32 33 js代码
js代码解释：$.each遍历json对象
1 var json = \'[{"id":"1","tagName":"apple"},{"id":"2","tagName":"orange"}, 2 {"id":"3","tagName":"banana"},{"id":"4","tagName":"watermelon"}, 3 {"id":"5","tagName":"pineapple"}]\'; 4 5 $.each(JSON.parse(json), function(idx, obj) { 6 alert(obj.tagName); 7 }); 8 9 //or 10 11 $.each($.parseJSON(json), function(idx, obj) { 12 alert(obj.tagName); 13 });
总结：
1、json数据虽是DOM结构的映射，但存DOM信息也不是照搬全存，比如每个ul或者li就没有必要再在json中存一个”type“：”ul“，需要观察DOM结构的共同点及规律，进而转换成json。
2、ajax回调函数传递参数问题：写回掉函数的时候发现没有地方传参数，这个时候涉及闭包问题，可以利用匿名函数调用你想调用的函数，并传递参数：
1 $.getJSON({ 2 type: "post", 3 url: "dist/json/nav.json", 4 success: function (data) { 5 var showList = $("<ul class=\'" + data.ulClass + "\'><li class=\'header\'>主导航</li></ul>"); 6 showAll(data, showList); 7 $(".sidebar").append(showList); 8 } 9 }); 10 11 like this
以上是关于用jquery根据json动态创建多级菜单导航（by https://www.cnblogs.com/fatty-yu/p/7088955.html）的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Spring boot 和 MYSQL 为多级菜单列表创建嵌套 JSON？
JavaScript库，用于创建切换的画布外多级导航，允许无休止地嵌套子菜单元素，支持滑动手势、键盘交互和ARIA属性。