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

我试图在MenuItemDataBound挂钩上手动选择父节点，虽然这样做有两件事：

将“selected”应用于'a'标签（我需要设置样式）
取消选择子菜单项（我不能同时选择这两个项目）

继承人的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;
    }
   }
}

希望我只是在这里忽略一些东西，但它让我疯了！非常会为某些人提供帮助。

干杯，

落基

更新通过设计，ASP.net菜单一次只能选择一个菜单项。这始终应用于menuitem列表的<a>标记。我已经改变了菜单以包含这个设计，并决定选择菜单父节点而不是它的子节点已经足够好了，因为我看起来像javascript / page渲染黑客是必需的。

相反，我所做的是找到当前选定的节点，使用递归查找父节点并选择它。对于想要做同样事情的人来说，这是代码：

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”。

Answer 2

这可能不是真正的问题，但似乎即使你将selected类放到li上，你还没有css声明（例如{{1}用它做任何事情。

Answer 3

回答我自己的问题 - 通过设计，ASP.net菜单一次只能选择一个菜单项。这始终应用于menuitem列表的标记。我已经改变了菜单以包含这个设计，并决定选择菜单父节点而不是它的子节点就足够了，因为我看起来像是一个javascript /页面渲染黑客是必需的。

相反，我所做的是找到当前选定的节点，使用递归查找父节点并选择它。对于想要做同样事情的人来说，这是代码：

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的样式

3 个答案: