- 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>
经验首页