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>&nbsp;&nbsp;&nbsp;
 20                         <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span>
 21                         <a href="javrscript:void();">综合部</a></li>
 22                     <li>&nbsp;&nbsp;&nbsp;
 23                         <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span>
 24                         <a href="javrscript:void();">大型活动部</a>
 25                     </li>
 26                     <li>&nbsp;&nbsp;&nbsp;
 27                         <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span>
 28                         <a href="javrscript:void();">展览部</a>
 29                     </li>
 30                     <li>&nbsp;&nbsp;&nbsp;
 31                         <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span>
 32                         <a href="javrscript:void();">以为会工作部</a>
 33                     </li>
 34                     <li>&nbsp;&nbsp;&nbsp;
 35                         <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span>
 36                         <a href="javrscript:void();">信息资源不</a>
 37                     </li>
 38                     <li>&nbsp;&nbsp;&nbsp;
 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                         &nbsp;&nbsp;&nbsp;
 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">十分感果</a></li>
 54                             <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">十分感果</a></li>
 55                             <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">十分感果</a></li>
 56                         </ul>
 57                     </li>
 58                     <li>
 59                         &nbsp;&nbsp;&nbsp;
 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">如俄额</a></li>
 64                             <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">如俄额</a></li>
 65                         </ul>
 66                     </li>
 67                     <li>
 68                         &nbsp;&nbsp;&nbsp;
 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">再度</a></li>
 73                             <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">再度</a></li>
 74                             <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">再度</a></li>
 75                             <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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 <!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>&nbsp;&nbsp;&nbsp;
 20                         <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span>
 21                         <a href="javrscript:void();">综合部</a></li>
 22                     <li>&nbsp;&nbsp;&nbsp;
 23                         <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span>
 24                         <a href="javrscript:void();">大型活动部</a>
 25                     </li>
 26                     <li>&nbsp;&nbsp;&nbsp;
 27                         <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span>
 28                         <a href="javrscript:void();">展览部</a>
 29                     </li>
 30                     <li>&nbsp;&nbsp;&nbsp;
 31                         <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span>
 32                         <a href="javrscript:void();">以为会工作部</a>
 33                     </li>
 34                     <li>&nbsp;&nbsp;&nbsp;
 35                         <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span>
 36                         <a href="javrscript:void();">信息资源不</a>
 37                     </li>
 38                     <li>&nbsp;&nbsp;&nbsp;
 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                         &nbsp;&nbsp;&nbsp;
 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">十分感果</a></li>
 54                             <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">十分感果</a></li>
 55                             <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">十分感果</a></li>
 56                         </ul>
 57                     </li>
 58                     <li>
 59                         &nbsp;&nbsp;&nbsp;
 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">如俄额</a></li>
 64                             <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">如俄额</a></li>
 65                         </ul>
 66                     </li>
 67                     <li>
 68                         &nbsp;&nbsp;&nbsp;
 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">再度</a></li>
 73                             <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">再度</a></li>
 74                             <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">再度</a></li>
 75                             <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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 <!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>&nbsp;&nbsp;&nbsp;
 20                         <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span>
 21                         <a href="javrscript:void();">综合部</a></li>
 22                     <li>&nbsp;&nbsp;&nbsp;
 23                         <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span>
 24                         <a href="javrscript:void();">大型活动部</a>
 25                     </li>
 26                     <li>&nbsp;&nbsp;&nbsp;
 27                         <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span>
 28                         <a href="javrscript:void();">展览部</a>
 29                     </li>
 30                     <li>&nbsp;&nbsp;&nbsp;
 31                         <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span>
 32                         <a href="javrscript:void();">以为会工作部</a>
 33                     </li>
 34                     <li>&nbsp;&nbsp;&nbsp;
 35                         <span class="anim"><img src="images/LOGO.png" alt="" width="20px"></span>
 36                         <a href="javrscript:void();">信息资源不</a>
 37                     </li>
 38                     <li>&nbsp;&nbsp;&nbsp;
 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                         &nbsp;&nbsp;&nbsp;
 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">十分感果</a></li>
 54                             <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">十分感果</a></li>
 55                             <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">十分感果</a></li>
 56                         </ul>
 57                     </li>
 58                     <li>
 59                         &nbsp;&nbsp;&nbsp;
 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">如俄额</a></li>
 64                             <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">如俄额</a></li>
 65                         </ul>
 66                     </li>
 67                     <li>
 68                         &nbsp;&nbsp;&nbsp;
 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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">再度</a></li>
 73                             <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">再度</a></li>
 74                             <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="anim">></span><a href="###">再度</a></li>
 75                             <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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<!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>&nbsp;&nbsp;&nbsp;
20 <span class=”anim”><img src=”images/LOGO.png” alt=”” width=”20px”></span>
21 <a href=”javrscript:void();”>综合部</a></li>
22 <li>&nbsp;&nbsp;&nbsp;
23 <span class=”anim”><img src=”images/LOGO.png” alt=”” width=”20px”></span>
24 <a href=”javrscript:void();”>大型活动部</a>
25 </li>
26 <li>&nbsp;&nbsp;&nbsp;
27 <span class=”anim”><img src=”images/LOGO.png” alt=”” width=”20px”></span>
28 <a href=”javrscript:void();”>展览部</a>
29 </li>
30 <li>&nbsp;&nbsp;&nbsp;
31 <span class=”anim”><img src=”images/LOGO.png” alt=”” width=”20px”></span>
32 <a href=”javrscript:void();”>以为会工作部</a>
33 </li>
34 <li>&nbsp;&nbsp;&nbsp;
35 <span class=”anim”><img src=”images/LOGO.png” alt=”” width=”20px”></span>
36 <a href=”javrscript:void();”>信息资源不</a>
37 </li>
38 <li>&nbsp;&nbsp;&nbsp;
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 &nbsp;&nbsp;&nbsp;
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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=”anim”>></span><a href=”###”>十分感果</a></li>
54 <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=”anim”>></span><a href=”###”>十分感果</a></li>
55 <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=”anim”>></span><a href=”###”>十分感果</a></li>
56 </ul>
57 </li>
58 <li>
59 &nbsp;&nbsp;&nbsp;
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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=”anim”>></span><a href=”###”>如俄额</a></li>
64 <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=”anim”>></span><a href=”###”>如俄额</a></li>
65 </ul>
66 </li>
67 <li>
68 &nbsp;&nbsp;&nbsp;
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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=”anim”>></span><a href=”###”>再度</a></li>
73 <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=”anim”>></span><a href=”###”>再度</a></li>
74 <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class=”anim”>></span><a href=”###”>再度</a></li>
75 <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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是否隐藏,如果是隐藏的就让它显示105if($(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// 如果不是隐藏的,就让它隐藏112else{
113 $(this).siblings(ul).slideUp(100);
114 $(this).siblings(.anim).removeClass(rota);
115 }
116 });
117 })
118</script>119120<!– 处理后台传递过来的数据,动态创建左侧导航 –>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
144var 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 ];
182183// console.log(“ddddd”);184 creatmenu(data);//调用方法185186// 定义一个创建菜单的方法187function 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);
194if(item.children) {//如果1级菜单有子菜单,就添加一级菜单数据并包含2级ul195// 添加一级菜单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>);
197198// 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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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);213if(val.children) {//如果二级菜单存在子菜单,就添加三级菜单214 $(ul.+two+i).append(<li>&nbsp;&nbsp;&nbsp;<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>);
215216// var ul3 = $(“<ul class=’hide three’></ul>”);217 $.each(val.children,function(q,meta) {// 遍历3级菜单218 $(ul.+three+j).append(<li>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<span class=’anim’><img src=’images/LOGO.png’ alt=” width=’20px’></span><a href=’javrscript:void();’ class=’active’>”+meta.text+”</a></li>”); 221 })
222 }
223else{//如果二级菜单没有子菜单,就只添加二级菜单224 $(ul.+two+i).append(<li>&nbsp;&nbsp;&nbsp;<span class=’anim’><img src=’images/jian.png’ alt=” width=’20px’></span><a href=’javrscript:void();’ class=’active’>+val.text+</a></li>);
225return;
226 }
227228 })
229 }
230else{//如果一级菜单没有子菜单就只渲染一级菜单数据231232 $(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>);
233return;
234 }
235 });
236 }
237</script>238</body>239</html>


 

 

 

» 本文来自:前端开发者 » 《jquery 根据后台传递过来的三维数组动态生成三级菜单_清玖_前端开发者》
» 本文链接地址:https://www.rokub.com/73835.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!