如何绑定菜单和子菜单使用jquery应用css?
问题描述:
我有以HTML格式蜇值的数据如何应用CSS和jQuery风格如何绑定菜单和子菜单使用jquery应用css?
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中甲这样的
- 菜单的Apperals
- 衬衫
- T恤衫
- H3SubMenu1
- 牛仔裤
- P1Submenu1
- P2SubMenu2
- 裤
- 运动装
- Women'sMenu” Apperals
- 纱丽
- 连衣裙
- 裤子
- 手机
- MobilePhones
- 片
- Memorycards
- Bluetooths
- Jewellerry
- 耳环
- 戒指
- 链
- KidsJwellery
,但我绑定。我想要的菜单和子菜单APPY CSS和jquery.how到申请Css和jQuery我不知道。可以任何一个帮我请..
答
这是我用它来建立我的菜单结构功能:
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);
};
};
}
菜单是个包含菜单和EL作为股利或含元素插入菜单成JSON对象。
我的菜单对象的格式如下:
var menu : [{
title : 'Home',
url : 'Default.html'
}, {
title : 'Groups',
url : '#',
subMenu : [{
title : 'Group1',
url : 'Group1.html'
},{
title : 'Group2',
url : 'group2.html'
}]
}];
希望帮助
你可以尝试菜单样式此链接:http://javascript-array.com/scripts/multi_level_drop_down_menu/?st 或这一个:http://www.noupe.com/css/100-great-css-menu-tutorials.html – Koenyn
@ koenyn ..实际上返回Html格式right.so要写jquery函数应用值...我看到链接http://*.com/questions/6688963/jquery-recursive-function-combine-nested-li-into-one ...仍然混淆如何转换为jquer y .. plas帮我编辑 –
好吧,如果你有正确格式的HTML,并且你知道你想使用什么样式,并且你想要做的就是使用jQuery将CSS类应用到你的HTML中,那很简单。 您可以使用css选择器来抓取jQuery对象。即获得你的li元素,你可以使用'$(“li”)'然后添加一个css类到你将会使用'$(“li”)。addClass(“menuItem”);' – Koenyn