需求：
運用AJAX請求文件menu.json，配置菜單欄，並實現以下功能點：
1. 點擊向左箭頭，菜單向左移動，隱藏
2. 點擊向右箭頭，菜單向右移動，顯示
3. 點擊一級菜單，被點擊菜單的子菜單顯示，其他兄弟節點的子菜單隱藏
頁面顯示：ajaxTest\WebRoot\nav.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>ajax json jquery 菜單案例</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 body { font-size: 13px; line-height: 130%; padding: 60px } 9 </style> 10 <link rel="stylesheet" type="text/css" href="css/style.css"/> 11 <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script> 12 <script type="text/javascript"> 13 $(function(){ 14 $.ajax({ 15 url: "data/menu.json", 16 success: function( data) { 17 var html = "<ul>"; 18 for(var i=0; i<data.length; i++) { 19 html += "<li>" + data[i].topMenu +"<ul>"; 20 var subData = data[i].subMenu; 21 for(var j=0; j<subData.length; j++) { 22 html += "<li>" +subData[j] + "</li>"; 23 } 24 html += "</ul></li>"; 25 } 26 html += "</ul>"; 27 $(".nav-container").prepend(html); 28 $(".nav-container>ul>li").siblings().children().hide(); 29 }, 30 error:function(data){ 31 alert(data); 32 } 33 }) 34 35 $(".drag-handle").on("click", function() { 36 if($(this).hasClass("right")) { 37 $(this).text(">"); 38 $(this).removeClass("right"); 39 $(this).addClass("left"); 40 $(this).parent().animate({"left": "-150px"}, 'slow'); 41 } else { 42 $(this).text("<"); 43 $(this).removeClass("left"); 44 $(this).addClass("right"); 45 $(this).parent().animate({"left": "0px"}, 'slow'); 46 } 47 }) 48 $(document).on("click", ".nav-container>ul>li", function() { 49 $(this).children().toggle(); 50 $(this).siblings().children().hide(); 51 return false; 52 }) 53 }) 54 </script> 55 </head> 56 <body> 57 <div class="nav-container"> 58 <div class="drag-handle right"><</div> 59 </div> 60 </body> 61 </html>
菜單Json數據：ajaxTest\WebRoot\data\menu.json
1 [ 2 { 3 "topMenu": "菜單1", 4 "subMenu": [ 5 "子菜單1", 6 "子菜單2", 7 "子菜單3" 8 ] 9 }, 10 { 11 "topMenu": "菜單2", 12 "subMenu": [ 13 "子菜單1", 14 "子菜單2", 15 "子菜單3" 16 ] 17 }, 18 { 19 "topMenu": "菜單3", 20 "subMenu": [ 21 "子菜單1", 22 "子菜單2", 23 "子菜單3" 24 ] 25 }, 26 { 27 "topMenu": "菜單4", 28 "subMenu": [ 29 "子菜單1", 30 "子菜單2", 31 "子菜單3" 32 ] 33 }, 34 { 35 "topMenu": "菜單5", 36 "subMenu": [ 37 "子菜單1", 38 "子菜單2", 39 "子菜單3" 40 ] 41 }, 42 { 43 "topMenu": "菜單6", 44 "subMenu": [ 45 "子菜單1", 46 "子菜單2", 47 "子菜單3" 48 ] 49 } 50 ]
頁面樣式：ajaxTest\WebRoot\css\style.css
1 .nav-container { 2 position: absolute; 3 top: 0; 4 left: 0; 5 width: 170px; 6 7 } 8 ul { 9 width: 150px; 10 float: left; 11 background: #204d62; 12 } 13 ul li { 14 list-style: none; 15 line-height: 40px; 16 text-align: center; 17 color: #fff; 18 cursor: pointer; 19 } 20 ul li > ul { 21 background: #eee; 22 } 23 ul li > ul li { 24 color: #204d62; 25 } 26 .drag-handle { 27 float: left; 28 width:20px; 29 height:40px; 30 background: #204d62; 31 color: #fff; 32 font-weight: bold; 33 line-height: 40px; 34 text-align: center; 35 cursor: pointer; 36 }