ASP.net菜单CSS父节点选择的样式没有URL [英] ASP.net Menu CSS parent node selected style without URL

问题描述

我知道之前已经问过无数次了，它们似乎都可以通过

I know this has been asked countless times before, and they all seem to be resolved by this approach, Although I can't seem to get it to work for my situation.

我正在远离CSSFriendly，因为.net 4不支持CSSFriendly(除非我将其渲染为3.5)，尽管我坚持使用默认的CSS样式，但我已经接近模仿功能了.问题-已选择父项.

I'm moving away from CSSFriendly as it is not supported in .net 4 (unless I render it as 3.5), and I'm close to mimicing the functionality using the default CSS styling, although I'm stuck on one issue - Parent selected.

我已经在SO和.net论坛上阅读了一些解决方案，尽管我仍然无法根据自己的情况使用它，但这是我的断言:

I've read a few solutions on SO and .net forums, although I still can't get it to work for my situation, here is my predicment:

我在母版页中有一个asp.net 4菜单，以及一个从站点地图加载的SiteMapDataSource.单击子节点时，我希望其父CSS也进行更改.

I have an asp.net 4 Menu in a masterpage together with a SiteMapDataSource which loads from a site map. When clicking on the child node, I want its parents CSS to change as well.

这是我的站点地图的简化版本

Here is a simplified version of my sitemap

<siteMapNode Parent - hidden/no url>
   <siteMapNode Home - url="~/" >
   <siteMapNode Item - no url >
       <siteMapNode Item-child1 - url = "~/child"/>
       <siteMapNode Item-child2 - url = "~/child2"/>
   </siteMapNode>
</siteMapNode>

所有CSS样式都可以正常工作，但是我有一个水平菜单，在此菜单中，由于选择"了CSS属性，因此在更改之前，该菜单将更改.但是，现在，.net 4实现仅选择您选择的菜单项.

All the CSS styling works fine, however I have a horizontal menu which before the ul li css would change as the CSS attribute was "selected". However now, the .net 4 implementation only selects the menu item you select.

我尝试在MenuItemDataBound钩子上手动选择父项，尽管这样做有两件事:

I've tried to manually select the parent on the MenuItemDataBound hook, although this does 2 things:

1. 将选定"应用于"a"标签(我需要设置ul li的样式)

1. Applys "selected" to the 'a' tag (I need to style the ul li)

取消选择子菜单项(我不能同时选择两个项)

Deselects the sub menu item (I can't have both items selected)

这里有CSS:

.elfabMenu{position:relative;}
.elfabMenu ul li a.popout{padding:0px !important; background-image:none !important;}
.elfabMenu ul{display:block;width:961px!important;margin:0;padding:0}
.elfabMenu ul li{font-family:Arial,Helvetica,sans-serif;font-size:13.5px;background:url(../images/menu_sep.png) no-repeat scroll left bottom transparent;text-decoration:none;color:#000;line-height:38px;padding:10px 23px 0}
.elfabMenu ul li li{background-image:none!important;width:230px;border-bottom:1px solid #000;border-top:1px solid #121212;padding:0;background-color:#0E0E0E;color:#ffffff}
.elfabMenu ul li li a{color:#ffffff; padding:5px 0 5px 15px}
.elfabMenu ul li li:hover{background-color:#000!important}
.elfabMenu ul li li a.selected{background-color:#000!important}
.elfabMenu ul li a.selected{background-image:none!important}
.elfabMenu ul li li.has-popup{background:url(../images/primary-menu-current-children.gif) no-repeat scroll 210px 20px #0E0E0E !important}
.elfabMenu ul li ul li ul.level3 {margin-top:-1px!important}

这里是数据绑定方法:

void ElfabMenu_MenuItemDataBound(object sender, MenuEventArgs e)
{
  if (SiteMap.CurrentNode != null)
  {
    if (e.Item.Selected == true)
    {
      e.Item.Selected = true;
      e.Item.Parent.Selectable = true;
      e.Item.Parent.Selected = true;
    }
   }
}

希望我只是在这里忽略了一些东西，但是它让我发疯了！非常感谢别人的帮助.

Hopefully I'm just overlooking something here, but its driving me mad! Would very much appretiate someones help.

干杯

岩石

更新通过设计，ASP.net菜单一次只能选择一个菜单项.这始终应用于菜单项列表的< a> 标记.我已经更改了菜单以结合这种设计，并决定选择菜单父节点而不是其子节点就足够了，因为我似乎需要使用javascript/页面渲染hack.

Update By design the ASP.net menu can only have one menuitem selected at a time. This is always applied to the <a> tag of the menuitem list. I've changed the menu to incorporate this design, and decided that having the menu parent node selected and not its children is good enough, as I looks like a javascript/page rendering hack is required.

相反，我要做的是找到当前选定的节点，使用递归找到父节点并选择它.这是任何想做的人的代码:

Instead what I do is find the current selected node, use recursion to find the parent and select it. Heres the code for anyone wanting to do the same:

protected void ElfabMenu_MenuItemDataBound(object sender, MenuEventArgs e)
{
    if (SiteMap.CurrentNode != null)
    {
        if (e.Item.Selected)
        {
            MenuItem parent = MenuParent_Recursion(e.Item);
            parent.Selectable = true;
            parent.Selected = true;
        }
    }
}

static MenuItem MenuParent_Recursion(MenuItem item)
{
    if (item.Parent == null)
    {
        return item;
    }

    return MenuParent_Recursion(item.Parent);

}

推荐答案

回答我自己的问题-通过设计，ASP.net菜单一次只能选择一个菜单项.这始终应用于菜单项列表的标签.我已经更改了菜单以结合这种设计，并决定选择菜单的父节点而不是其子节点就足够了，因为我似乎需要使用javascript/页面渲染技术.

Answering my own question - By design the ASP.net menu can only have one menuitem selected at a time. This is always applied to the tag of the menuitem list. I've changed the menu to incorporate this design, and decided that having the menu parent node selected and not its children is good enough, as I looks like a javascript/page rendering hack is required.

相反，我要做的是找到当前选定的节点，使用递归找到父节点并选择它.这是任何想做的人的代码:

Instead what I do is find the current selected node, use recursion to find the parent and select it. Heres the code for anyone wanting to do the same:

protected void ElfabMenu_MenuItemDataBound(object sender, MenuEventArgs e)
{
    if (SiteMap.CurrentNode != null)
    {
        if (e.Item.Selected)
        {
            MenuItem parent = MenuParent_Recursion(e.Item);
            parent.Selectable = true;
            parent.Selected = true;
        }
    }
}

static MenuItem MenuParent_Recursion(MenuItem item)
{
    if (item.Parent == null)
    {
        return item;
    }

    return MenuParent_Recursion(item.Parent);

}

这篇关于ASP.net菜单CSS父节点选择的样式没有URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！