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）
原文地址：http://www.cnblogs.com/xu-blog/p/7880405.html