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
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("
"+item.text+"");
197
198 // var ul2 = $("");
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(" 
"+val.text+"");
205 // $('ul.two').prepend(" "+val.text+"");
206 // $('ul.one').eq(i).children('li').children('ul.two').prepend(" "+val.text+"");
207 // $(ul2).append("").appendTo(parent);
208 // $(ul.one).eq(i).children(ul2).children('ul.two').prepend(" "+val.text+"");
209 // $('ul.one').eq(i).children('li').children('ul.two').prepend(" "+val.text+"");
210 // console.log(val);
211 // console.log(val.text);
212 // console.log(val.children);
213 if(val.children) {//如果二级菜单存在子菜单，就添加三级菜单
214 $("ul."+"two"+i).append(" "+val.text+"");
215
216 // var ul3 = $("");
217 $.each(val.children,function(q,meta) {// 遍历3级菜单
218 $("ul."+"three"+j).append(" "+meta.text+"");
219 // $('ul.two').eq(j).children('ul.three').prepend(" "+meta.text+"");
220 // $('ul.one').eq(i).children('li').children('ul.two').eq(j).children('ul.three').prepend(" "+meta.text+"");
221 })
222 }
223 else{//如果二级菜单没有子菜单,就只添加二级菜单
224 $("ul."+"two"+i).append(" "+val.text+"");
225 return;
226 }
227
228 })
229 }
230 else{//如果一级菜单没有子菜单就只渲染一级菜单数据
231
232 $('ul.one').append(""+item.text+"");
233 return;
234 }
235 });
236 }
237 script>
238 body>
239 html>
