jquery 根據後臺傳遞過來的三維數組動態生成三級菜單
根據後臺傳遞過來的三維數組動態生成三級菜單
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>動態樹型導航</title> 8 <script src="jquery.min.js"></script> 9 <link rel="stylesheet" href="css/style.css"> 10 <link rel="stylesheet" href="css/nav.css"> 11 </head> 12 <body> 13 <div class="list"> 14 <ul class="one"> 15 <!-- <li> 16 <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span> 17 <a href="javrscript:void();" class="active">中國文聯</a> 18 <ul class="hide two"> 19 <li> 20 <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span> 21 <a href="javrscript:void();">綜合部</a></li> 22 <li> 23 <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span> 24 <a href="javrscript:void();">大型活動部</a> 25 </li> 26 <li> 27 <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span> 28 <a href="javrscript:void();">展覽部</a> 29 </li> 30 <li> 31 <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span> 32 <a href="javrscript:void();">覺得會工做部</a> 33 </li> 34 <li> 35 <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span> 36 <a href="javrscript:void();">信息資源不</a> 37 </li> 38 <li> 39 <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span> 40 <a href="javrscript:void();">刷給你年展</a> 41 </li> 42 </ul> 43 </li> 44 <li> 45 <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span> 46 <a href="javrscript:void();" class="active">組織機構</a> 47 <ul class="hide two"> 48 <li> 49 50 <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span> 51 <a href="javrscript:void();" class="active">沒寫機關</a> 52 <ul class="hide three"> 53 <li> <span class="anim">></span><a href="###">十分感果</a></li> 54 <li> <span class="anim">></span><a href="###">十分感果</a></li> 55 <li> <span class="anim">></span><a href="###">十分感果</a></li> 56 </ul> 57 </li> 58 <li> 59 60 <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span> 61 <a href="javrscript:void();" class="active">藝術中心</a> 62 <ul class="hide three"> 63 <li> <span class="anim">></span><a href="###">如俄額</a></li> 64 <li> <span class="anim">></span><a href="###">如俄額</a></li> 65 </ul> 66 </li> 67 <li> 68 69 <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span> 70 <a href="javrscript:void();" class="active">雜誌社</a> 71 <ul class="hide three"> 72 <li> <span class="anim">></span><a href="###">再度</a></li> 73 <li> <span class="anim">></span><a href="###">再度</a></li> 74 <li> <span class="anim">></span><a href="###">再度</a></li> 75 <li> <span class="anim">></span><a href="###">再度</a></li> 76 </ul> 77 </li> 78 </ul> 79 </li> 80 <li> 81 <a href="###" class="active">哈哈哈巴啦啦</a> 82 <ul class="hide"> 83 <li><a href="###">巴啦啦小魔仙</a></li> 84 <li><a href="###">巴啦啦小魔仙</a></li> 85 <li><a href="###">巴啦啦小魔仙</a></li> 86 <li><a href="###">巴啦啦小魔仙</a></li> 87 <li><a href="###">巴啦啦小魔仙</a></li> 88 <li><a href="###">巴啦啦小魔仙</a></li> 89 <li><a href="###">巴啦啦小魔仙</a></li> 90 </ul> 91 </li> --> 92 </ul> 93 </div> 94 95 96 <script> 97 // 當文檔被加載時觸發函數 98 $(function(){ 99 // 先讓第一個一級菜單有背景顏色 100 $('div.list>ul>li').eq(0).addClass('color'); 101 $('ul.one').on('click','a.active',function(){//不能直接用$獲取到動態添加的元素 102 // console.log("===================="); 103 // console.log($(this)); 104 // 判斷ul是否隱藏，若是是隱藏的就讓它顯示 105 if($(this).siblings("ul").css("display")=="none"){ 106 $(this).siblings("ul").slideDown(100); 107 $(this).parent('li').addClass('color'); 108 $(this).parent('li').siblings().removeClass('color'); 109 $(this).siblings('.anim').addClass('rota'); 110 } 111 // 若是不是隱藏的，就讓它隱藏 112 else{ 113 $(this).siblings("ul").slideUp(100); 114 $(this).siblings('.anim').removeClass('rota'); 115 } 116 }); 117 }) 118 </script> 119 120 <!-- 處理後臺傳遞過來的數據，動態建立左側導航 --> 121 <script> 122 // var xmlhttp = new XMLHttpRequest(); 123 // xmlhttp.onreadystatechange = function() { 124 // if(this.readyState==4 && this.status==200) { 125 // // 將後臺返回的字符串數據轉js對象 126 // myobj=JSON.parse(this.responseText); 127 // // 對數據進行處理 128 // $(document).ready(function() { 129 // $.ajax({ 130 // url: '', 131 // async: 'yes', 132 // type: 'Post', 133 // dataType: 'json', 134 // success: function(data) { 135 // creatmenu(data); 136 // },error:function(data) { 137 // alert("error:"+JSON.stringify(data)); 138 // } 139 // }) 140 // }); 141 // } 142 // } 143
//模擬後臺傳遞過來的數據 144 var data=[ 145 { "id": "1", iconCls: "fa fa-send-o", text: "敏捷開發", children: [ 146 { "id": "1_1", iconCls: "fa fa-desktop", text: "代碼生成器", url: "../pages/index.jsp" }, 147 { "id": "1_2", iconCls: "fa fa-search", text: "單頁管理", url: "pages/1.html"}, 148 { "id": "1_3", iconCls: "fa fa-send-o", text: "插件演示", url: "pages/1.html" }, 149 { "id": "1_4", iconCls: "fa fa-window-restore", text: "開發示例", children: [ 150 { "id": "1_4_1", iconCls: "fa fa-assistive-listening-systems", text: "商機管理" , url: "pages/1.html"}, 151 { "id": "khgl", iconCls: "fa fa-vcard", text: "客戶管理", url: "pages/1.html" }, 152 { "id": "kpxx", iconCls: "fa fa-file-excel-o", text: "開票信息" , url: "pages/1.html"}, 153 { "id": "khdd", iconCls: "fa fa-modx", text: "客戶訂單" , url: "pages/1.html"} 154 ] 155 } 156 ] 157 }, 158 { "id": "xtgl", iconCls: "fa fa-desktop", text: "系統管理", children: [ 159 { "id": "xzgl", iconCls: "fa fa-leaf", text: "行政管理", url: "pages/1.html" }, 160 { "id": "sjzd", iconCls: "fa fa-book", text: "數據字典", url: "pages/1.html" }, 161 { "id": "djbm", iconCls: "fa fa-barcode", text: "單據編碼", url: "pages/1.html" }, 162 { "id": "xtgn", iconCls: "fa fa-navicon", text: "系統功能", url: "pages/1.html" }, 163 { "id": "excel", iconCls: "fa fa-file-excel-o", text: "Excel配置", children: [ 164 { "id": "drpz", iconCls: "fa fa-sign-out", text: "導入配置", url: "pages/1.html" }, 165 { "id": "dcpz", iconCls: "fa fa-sign-out", text: "導出配置", url: "pages/1.html" } 166 ] 167 }, 168 { "id": "sjgl", iconCls: "fa fa-database", text: "數據管理", children: [ 169 { "id": "sjklj", iconCls: "fa fa-plug", text: "數據庫鏈接", url: "pages/1.html" }, 170 { "id": "sjbgl", iconCls: "fa fa-table", text: "數據表管理", url: "pages/1.html" }, 171 { "id": "sjygl", iconCls: "fa fa-bullseye", text: "數據源管理", url: "pages/1.html" } 172 ] 173 } 174 ]}, 175 { "id": "sjgl", iconCls: "fa fa-database", text: "數據管理", children: [ 176 { "id": "sjklj", iconCls: "fa fa-plug", text: "數據庫鏈接", url: "pages/1.html" }, 177 { "id": "sjbgl", iconCls: "fa fa-table", text: "數據表管理", url: "pages/1.html" }, 178 { "id": "sjygl", iconCls: "fa fa-bullseye", text: "數據源管理", url: "pages/1.html" } 179 ] 180 } 181 ]; 182 183 // console.log("ddddd"); 184 creatmenu(data);//調用方法 185 186 // 定義一個建立菜單的方法 187 function creatmenu(data) { 188 // console.log(data); 189 $.each(data,function(i,item) {//遍歷總體數據，一支一支的遍歷，不是一層一層去遍歷 190 console.log(item); 191 // console.log(item.children); 192 // console.log(item.children.length); 193 console.log(item.text); 194 if(item.children) {//若是1級菜單有子菜單,就添加一級菜單數據幷包含2級ul 195 // 添加一級菜單 196 $('ul.one').append("<li><span class='anim'><img src='images/jian.png' alt='' width='15px' height='15px'></span><a href='javrscript:void();' class='active'>"+item.text+"</a><ul class='hide two two"+i+" '></ul></li>"); 197 198 // var ul2 = $("<li></li>"); 199 // console.log(i); 200 // console.log($(this).index());//爲何全都是-1？？？？？？？？？？ 201 $.each(item.children,function(j,val) {//循環1級菜單的2級菜單 202 // console.log(i); 203 // console.log($('ul.one').eq(i)); 204 // $('ul.one').eq(i).children('ul.two').prepend("<li> <span class='anim'><img src='images/LOGO.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+val.text+"</a><ul class='hide three'></ul></li>"); 205 // $('ul.two').prepend("<li> <span class='anim'><img src='images/LOGO.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+val.text+"</a><ul class='hide three'></ul></li>"); 206 // $('ul.one').eq(i).children('li').children('ul.two').prepend("<li> <span class='anim'><img src='images/LOGO.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+val.text+"</a><ul class='hide three'></ul></li>"); 207 // $(ul2).append("<ul class='hide two'></ul>").appendTo(parent); 208 // $(ul.one).eq(i).children(ul2).children('ul.two').prepend("<li> <span class='anim'><img src='images/LOGO.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+val.text+"</a></li>"); 209 // $('ul.one').eq(i).children('li').children('ul.two').prepend("<li> <span class='anim'><img src='images/LOGO.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+val.text+"</a><ul class='hide three'></ul></li>"); 210 // console.log(val); 211 // console.log(val.text); 212 // console.log(val.children); 213 if(val.children) {//若是二級菜單存在子菜單，就添加三級菜單 214 $("ul."+"two"+i).append("<li> <span class='anim'><img src='images/jian.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+val.text+"</a><ul class='hide three three"+j+"'></ul></li>"); 215 216 // var ul3 = $("<ul class='hide three'></ul>"); 217 $.each(val.children,function(q,meta) {// 遍歷3級菜單 218 $("ul."+"three"+j).append("<li> <span class='anim'><img src='images/jian.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+meta.text+"</a></li>"); 219 // $('ul.two').eq(j).children('ul.three').prepend("<li> <span class='anim'><img src='images/LOGO.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+meta.text+"</a></li>"); 220 // $('ul.one').eq(i).children('li').children('ul.two').eq(j).children('ul.three').prepend("<li> <span class='anim'><img src='images/LOGO.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+meta.text+"</a></li>"); 221 }) 222 } 223 else{//若是二級菜單沒有子菜單,就只添加二級菜單 224 $("ul."+"two"+i).append("<li> <span class='anim'><img src='images/jian.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+val.text+"</a></li>"); 225 return; 226 } 227 228 }) 229 } 230 else{//若是一級菜單沒有子菜單就只渲染一級菜單數據 231 232 $('ul.one').append("<li><span class='anim'><img src='images/jian.png' alt='' width='20px'></span><a href='javrscript:void();' class='active'>"+item.text+"</a></li>"); 233 return; 234 } 235 }); 236 } 237 </script> 238 </body> 239 </html>
相關文章
- 1. vue根據後臺傳遞的json數據生成動態配置頁面（一）動態組件
- 2. React根據後臺數據動態生成Form表單
- 3. 根據後臺傳入的時間戳生成動態時鐘
- 4. Vue 實現動態生成路由（動態生成菜單，根據菜單動態生成路由）
- 5. html jquery select 三級菜單
- 6. vue+ element 後臺根據權限生成權限菜單，動態綁定路由
- 7. 【antd】根據後臺數據動態生成表單和數據更新
- 8. 根據後臺返回數據動態生成路由
- 9. 經過js根據後臺數據動態生成一個頁面
- 10. jquery怎麼根據後臺傳過來的值動態設置下拉框、單選框選中
- 更多相關文章...
- • C# 動態數組（ArrayList） - C#教程
- • C# 傳遞數組給函數 - C#教程
- • Flink 數據傳輸及反壓詳解
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
