ASP.net 菜单 CSS 父节点选择的样式没有 URL

Question

我知道这已经被问过无数次了，而且它们似乎都被 this approach 解决了。 ，虽然我似乎无法让它适用于我的情况。

我正在远离 CSSFriendly，因为它在 .net 4 中不受支持(除非我将其呈现为 3.5)，并且我接近使用默认 CSS 样式来模仿功能，尽管我坚持使用一个问题 - 父选择。

我已经在 SO 和 .net 论坛上阅读了一些解决方案，尽管我仍然无法让它适用于我的情况，这是我的预测:

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

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

<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 样式都工作正常，但是我有一个水平菜单，在 ul li css 会随着 CSS 属性被“选中”而改变之前。但是现在，.net 4 实现只会选择您选择的菜单项。

我尝试在 MenuItemDataBound Hook 上手动选择父级，尽管这会做两件事:

1. 将“selected”应用于“a”标签(我需要设置 ul li 的样式)

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

这是 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}

这是数据绑定(bind)方法:

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;
    }
   }
}

希望我只是忽略了这里的某些东西，但这让我抓狂!非常感谢有人帮助。

干杯，

洛奇

更新 按照设计，ASP.net 菜单一次只能选择一个菜单项。这始终适用于 <a>菜单项列表的标签。我更改了菜单以合并此设计，并决定选择菜单父节点而不是其子节点就足够了，因为我看起来需要 javascript/页面渲染 hack。

相反，我所做的是找到当前选定的节点，使用递归找到父节点并选择它。以下是任何想要执行相同操作的人的代码:

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);

}

Answer 1

对此稍作修改对我有用。

if (SiteMap.CurrentNode != null)
        {
            if (e.Item.Selected)
            {
                if (e.Item.Depth == 1)
                {
                    e.Item.Parent.Selectable = true;
                    e.Item.Parent.Selected = true;
                }
                if (e.Item.Depth == 2)
                {
                    e.Item.Parent.Parent.Selectable = true;
                    e.Item.Parent.Parent.Selected = true;
                }
                if (e.Item.Depth == 3)
                {
                    e.Item.Parent.Parent.Parent.Selectable = true;
                    e.Item.Parent.Parent.Parent.Selected = true;
                }
            }            
        }

不知道为什么我的深度低了一个，可能是因为我的站点地图上有 ShowStartingNode="False"。