首页 新闻 搜索 专区 学院

Jscript+Css生成菜单

0
悬赏园豆:20 [已解决问题] 解决于 2014-06-30 14:33

本人在做导航菜单时原来用VS本身自带的一个服务器控件,做出来之后发现样式没法调到美工的要求,现在想用js+Css重新来过。就是从数据库查得数据,经Ajax传到前台,利用Css和Js生成ul与li的有序列表来生成菜单,望各位仁兄帮忙!

落幕的开场白的主页 落幕的开场白 | 初学一级 | 园豆:168
提问于:2014-06-27 17:36
< >
分享
最佳答案
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             });
View Code

已经解决!

落幕的开场白 | 初学一级 |园豆:168 | 2014-06-30 14:32
其他回答(1)
0

既然用到Ajax,后台转成json格式数据,JavaScript将数据拼接起来,然后用append放到div中,拼接的时候 将给ul加个class引用美工做的样式,就可以了

收获园豆:20
秋壶冰月 | 园豆:5675 (大侠五级) | 2014-06-29 16:28
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册