Jscript+Css生成菜单
0
悬赏园豆：20
[已解决问题]
解决于 2014-06-30 14:33
本人在做导航菜单时原来用VS本身自带的一个服务器控件，做出来之后发现样式没法调到美工的要求，现在想用js+Css重新来过。就是从数据库查得数据，经Ajax传到前台，利用Css和Js生成ul与li的有序列表来生成菜单，望各位仁兄帮忙！
最佳答案
0
1 $.ajax({ 2 type: "post", 3 dataType: "json", 4 contentType: "application/json;charset=utf-8", 5 url: "AjaxWebService.asmx/GetRootMenu", 6 async: false, 7 data: "{}", 8 success: function (data) { 9 var json = JSON.parse(data.d); 10 $("#menu").empty(); 11 $("#menu").append("<ul class='nav navbar-nav'></ul>"); 12 var menu_html = $("#menu ul").html(); 13 for (var i in json) { 14 menu_html = menu_html + "<li><a href='" + json[i].Url + "'"; 15 var parentId = json[i].MenuID; 16 $.ajax({ 17 type: "post", 18 dataType: "json", 19 async: false, 20 contentType: "application/json;charset=utf-8", 21 url: "AjaxWebService.asmx/GetChildMenu", 22 data: "{parentId:'" + parentId + "'}", 23 success: function (data1) { 24 var json1 = JSON.parse(data1.d); 25 if (json1 != null) { 26 menu_html = menu_html + "class='dropdown-toggle' data-toggle='dropdown'>" + json[i].MenuName + "<b class='caret'></b></a><ul class='dropdown-menu'>"; 27 for (var j in json1) { 28 menu_html = menu_html + "<li><a href='" + json1[j].Url + "'>" + json1[j].MenuName + " </a></li>"; 29 } 30 menu_html = menu_html + "</ul>"; 31 } 32 else { 33 menu_html = menu_html + ">" + json[i].MenuName; "</a>"; 34 } 35 } 36 }); 37 menu_html = menu_html + "</li>"; 38 } 39 $("#menu ul").html(menu_html); 40 } 41 });
已经解决！
其他回答(1)
0
既然用到Ajax，后台转成json格式数据，JavaScript将数据拼接起来，然后用append放到div中，拼接的时候 将给ul加个class引用美工做的样式，就可以了
收获园豆：20