asp.net-core - 如何在 .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;

}