Blazor导航菜单子菜单

Question

我创建了一个带有可折叠子菜单的菜单项。当主页上的顶级项目Home被活动属性、预期行为、，然后该项目显示为活动，因为我将href设置为无(href="。当Index.razor页面显示管理菜单项时，由于href也设置为空字符串，该菜单项也设置为活动。

使管理看起来像菜单项的最佳方式是什么？在这种情况下，我应该使用div吗？

有没有办法使默认的活动属性不被分配？

我想我错过了一些简单的Blazor东西，让它表现得像我想要的那样。非常感谢您的帮助。

HTML

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<AuthorizeView>
<Authorized>
<li class="nav-item px-3">
<NavLink class="nav-link" href="Calculator/CalculationName">
<span class="oi oi-list" aria-hidden="true"></span> Calculation Set
</NavLink>
</li>
</Authorized>
</AuthorizeView>
<AuthorizeView Roles="Admin">
<Authorized>
<li class="nav-item px-3">
<NavLink class="nav-link" href="" @onclick="() => expandAdminSubMenu = !expandAdminSubMenu">
<span class="oi oi-book" aria-hidden="true"></span>Administration
</NavLink>
@if (expandAdminSubMenu)
{
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="Administration/ClientList" Match=@NavLinkMatch.All>
<span class="oi oi-person" aria-hidden="true"></span>Client List
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="Administration/Client/-1" Match=@NavLinkMatch.All>
<span class="oi oi-person" aria-hidden="true"></span>Client
</NavLink>
</li>
</ul>
}
</li>
</Authorized>
</AuthorizeView>
<li class="nav-item px-3">
<NavLink class="nav-link" href="https://www.example.com/contact-us/" target="_blank">
<span class="oi oi-person" aria-hidden="true"></span> Contact Us
</NavLink>
</li>
</ul>
</div>
@code{
private bool expandAdminSubMenu = false;
}

CSS

.sidebar .nav-item a.active {
background-color: #3b34a8;
color: white;
font-weight: bold;
}
.sidebar .nav-item a:hover {
background-color: #3b34a8;
color: white;
}

Answer 1

您可以设置ActiveClass="@string.Empty"-ActiveClass是控制导航链接将获得的活动类的参数，默认为active，但您可以将其设置为空字符串，使其不呈现任何内容。

选项2=用简单的<a>标记替换NavLink-它不会得到活动类。