如何使用Jquery綁定菜單和子菜單以應用CSS？

Question

我有html格式的字符串值中的數據如何應用css和jquery樣式

 public class Menus
      {
        public List<Menus> GetALL { get; set; }  
            public int menuId { get; set; }
            public string menuName { get; set; }
            public string menuURL { get; set; }
            public int parentId { get; set; }
       }    
    public class MenuModel
    {
        public MenuItemsEntities objEntities = new MenuItemsEntities();

        public string GetMenu()
        {
            //Get MainMenu Menus       
            Menus menuobj = new Menus();            
            var objmenu = from menus in objEntities.MenuItems
                          where menus.ParentId == 0
                          select menus;

            string strMenuBuild = string.Empty;
            strMenuBuild += "<ul>";
            foreach (var i in objmenu)
            {
                menuobj.menuName = i.ItemName;
                menuobj.menuId = i.MenuItemsID;
                menuobj.menuURL = i.URL;
                if (i.ParentId == 0)
                {                  
                    //GetSubMenu();
                    strMenuBuild = strMenuBuild + "<li><a href='" + menuobj.menuURL + "'>" + menuobj.menuName + "</a><ul>";
                    strMenuBuild += GetSubMenu(Convert.ToInt32(menuobj.menuId)) + "</ul></li>";
                    //strMenuBuild  += "</ul></li>";
                }
            }
            strMenuBuild += "</ul>";
            return strMenuBuild;
        }
        public string GetSubMenu(int submenuid)
        {
            string strSubBuild = string.Empty;
            Menus menuobj = new Menus();    
            var submenu=   from menus in objEntities.MenuItems
                          where menus.ParentId == submenuid
                          select menus;           
            if (submenu.Count() > 0)
            {
                foreach (var sbmnu in submenu)                
                {
                    menuobj.menuURL = sbmnu.URL;
                    menuobj.menuName = sbmnu.ItemName;
                    menuobj.menuId = sbmnu.MenuItemsID;

                    strSubBuild = strSubBuild + "<li ><a href='" + menuobj.menuURL + "'>" + menuobj.menuName + "</a>";

                    var submneu1 = from menus in objEntities.MenuItems
                                   where menus.ParentId == menuobj.menuId 
                                   select menus;

                    if (submneu1.Count() > 0)
                    {
                        strSubBuild += "<ul>";
                        strSubBuild += GetSubMenu(Convert.ToInt32(menuobj.menuId));
                        strSubBuild += "</ul>";  
                    }
                    strSubBuild += "</li>";
                }               
            }
            return strSubBuild;
        }
    }  

我已經像這樣返回到Html formate中的String

---

• 菜單的召喚
  • 上衣
  • T恤衫
    • H3子菜單1
  • 牛仔褲
    • P1子菜單1
    • P2子菜單2
  • 長褲
  • 運動服
• 女士菜單的服飾
  • 莎麗絲
  • 連衣裙
  • 長褲
• 手機
  • 手機
  • 平板電腦
  • 記憶卡
  • 藍牙功能
• 珠寶首飾
  • 耳環
  • 戒指
  • 鏈條
  • 兒童用品

但是我綁定菜單和子菜單。我想應用css和jquery。如何應用css和jquery我不知道。任何人都可以幫助我..

Answer 1

這是我用來建立菜單結構的功能：

var buildMenu = function(menu, el) {
    var ul = $('<ul></ul>');
    ul.appendTo(el);
        for(var i in menu) {
            var menuItem = $('<li><a href="' + menu[i].url + '">' + menu[i].title + '</a></li>');
            menuItem.appendTo(ul);
            if(menu[i].subMenu) {
                buildMenu(menu[i].subMenu, menuItem);
            };
        };
}

menu是包含菜單的JSON對象，而el是div或包含要插入菜單的元素。

我的菜單對象具有以下格式：

var menu : [{
    title   : 'Home',
    url     : 'Default.html'
}, {
    title   : 'Groups',
    url     : '#',
    subMenu : [{
        title   : 'Group1',
        url     : 'Group1.html'
    },{
        title   : 'Group2',
        url     : 'group2.html'
    }]
}];

希望能有所幫助