如何在 .Net Core Blazor 应用程序中创建带有可折叠子菜单的 NavMenu

Question

我正在尝试创建一个形状像这样的 blazor 导航菜单

• 项目a

• 项目b

当我点击项目 b 时，它会像这样扩展子菜单，然后点击子项目，打开新页面

• 项目a

• 项目b

  • 分项1

  • 分项2

我刚刚编辑了原始的 blazor 应用程序，但没有成功。按钮出现但不折叠子菜单。任何的想法？

<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>
    <li class="nav-item px-3">
        <NavLink class="nav-link" href="counter">
            <span class="oi oi-plus" aria-hidden="true"></span> Counter
        </NavLink>
    </li>
    <li class="nav-item px-3">
        <NavLink class="nav-link" href="fetchdata">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch Data
        </NavLink>
    </li>
    <li class="dropdown">

        <button data-toggle="collapse" data-target="#demo">Collapsible</button>

        <div id="demo" class="collapse">
            <ul>
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="meeting">
                        <span class="oi oi-plus" aria-hidden="true"></span> Meetings
                    </NavLink>
                </li>
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="conference">
                        <span class="oi oi-list-rich" aria-hidden="true"></span> Conferences
                    </NavLink>
                </li>
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="event">
                        <span class="oi oi-list-rich" aria-hidden="true"></span> Events
                    </NavLink>
                </li>

            </ul>
        </div>

    </li>
</ul>

Answer 1

不要使用数据切换和数据目标。

这些由 boostrap.js 使用，但是您不想以这种方式修改 DOM。

您要做的是使用 if 语句，从而让 Blazor 处理渲染：

    <NavLink class="nav-link" @onclick="()=>expandSubNav = !expandSubNav">
        <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
    </NavLink>
    @if (expandSubNav)
    {
        <NavLink class="expand-menu" href="">
            <span>Sub1</span>
        </NavLink>
        <NavLink class="" href="">
            <span>Sub2</span>
        </NavLink>
    }

并将 expandSubNav 字段放入您的代码部分：

@code {

    private bool expandSubNav;

}

Answer 2

如果您有更多子菜单，可以尝试此解决方案

<div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">System</a>
    <button class="navbar-toggler" @onclick="() => ToggleNavMenu(navSubmenu)">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" @onclick="() => ToggleNavMenu(NavSubmenu.None)" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" @onclick="() => TogleSubmenu(NavSubmenu.First)">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Submenu 1
            </NavLink>
        </li>

        @if (navSubmenu == NavSubmenu.First)
        {
            <li class="nav-item px-5">
                <NavLink class="nav-link" @onclick="() => ToggleNavMenu()" href="counter">
                    <span class="oi oi-plus" aria-hidden="true"></span> Counter
                </NavLink>
            </li>
            <li class="nav-item px-5">
                <NavLink class="nav-link" @onclick="() => ToggleNavMenu()" href="fetchdata">
                    <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch Data
                </NavLink>
            </li>
        }

        <li class="nav-item px-3">
            <NavLink class="nav-link" @onclick="() => TogleSubmenu(NavSubmenu.Second)">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Submenu 2
            </NavLink>
        </li>

        @if (navSubmenu == NavSubmenu.Second)
        {
            <li class="nav-item px-5">
                <NavLink class="nav-link" @onclick="() => ToggleNavMenu()" href="counter">
                    <span class="oi oi-plus" aria-hidden="true"></span> Counter
                </NavLink>
            </li>
            <li class="nav-item px-5">
                <NavLink class="nav-link" @onclick="() => ToggleNavMenu()" href="fetchdata">
                    <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch Data
                </NavLink>
            </li>
        }
    </ul>
</div>

@code {
    private enum NavSubmenu
    {
        None,
        First,
        Second
    }

    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
    private NavSubmenu navSubmenu =  NavSubmenu.None;
    private bool collapseNavMenu = true;


    private void ToggleNavMenu(NavSubmenu? submenu = null)
    {
        collapseNavMenu = !collapseNavMenu;
        navSubmenu = submenu ?? navSubmenu;
    }

    private void TogleSubmenu(NavSubmenu submenu)
    {
        if (navSubmenu == submenu)
            navSubmenu = NavSubmenu.None;
        else
            navSubmenu = submenu;
    }
}

Answer 3

我的解决方案，在出现无法关闭的问题后，单击子菜单：

适用于移动设备：

 <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
    <div class="container">
        <a class="navbar-brand" href="">MyPrgramm</a>
        <button class="navbar-toggler" type="button" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <NavLink class="nav-link text-dark" href="" Match="NavLinkMatch.All">
                        <span class="oi oi-home" aria-hidden="true"></span> Home
                    </NavLink>
                </li>
                <li class="nav-item">
                    <NavLink class="nav-link text-dark" href="counter">
                        <span class="oi oi-plus" aria-hidden="true"></span> Menu-II
                    </NavLink>
                </li>
                <li class="nav-item dropdown show">
                    <NavLink class="nav-link dropdown-toggle" @onclick="() => expandSubNavSettings = !expandSubNavSettings" id="navbarDropdown" >
                        <span class="oi oi-list-rich" aria-hidden="true"></span> Menu III
                    </NavLink>
                    @if (expandSubNavSettings)
                    {
                        <li class="dropdown-menu show" aria-labelledby="navbarDropdown" @onclick="() => expandSubNavSettings = !expandSubNavSettings">
                            <li class="nav-item">
                                <NavLink class="nav-link text-dark" href="fetchdata">
                                    <span class="oi oi-fork" aria-hidden="true"></span> Fetch
                                </NavLink>
                            </li>
                            <li class="nav-item">
                                <NavLink class="nav-link text-dark" href="counter">
                                    <span class="oi oi-command" aria-hidden="true"></span> Counter
                                </NavLink>
                            </li>
                            <li class="nav-item">
                                <NavLink class="nav-link text-dark" href="home">
                                    <span class="oi oi-home" aria-hidden="true"></span> Home
                                </NavLink>
                            </li>
                        </li>
                    }
                </li>



            </ul>
        </div>
    </div>
</nav>

@代码 {

bool collapseNavMenu = true;

private bool expandSubNavSettings;


string baseMenuClass = "navbar-collapse d-sm-inline-flex flex-sm-row-reverse";

string NavMenuCssClass => baseMenuClass + (collapseNavMenu ? " collapse" : "");

void ToggleNavMenu()
{
    if(!expandSubNavSettings)
    {
        collapseNavMenu = !collapseNavMenu;
    }


}

}