Blazor 导航菜单子菜单答案

【问题标题】：Blazor Nav Menu Sub MenuBlazor 导航菜单子菜单
【发布时间】：2021-04-10 15:31:35
【问题描述】：

我创建了一个带有可折叠子菜单的菜单项。在主页上时，顶级项目 Home 正在使用活动属性、预期行为进行装饰，然后该项目显示为活动，因为我设置了 href为空 (href="") 当 Index.razor 页面显示时，Administration 菜单项也设置为活动，因为 href 也设置为空字符串。

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

有没有办法让默认的active属性不被赋值？

我想我缺少一些简单的 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;
}

【问题讨论】：

标签： html css blazor

【解决方案1】：

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

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

【讨论】：