使用ASP.NETBlazor,我如何使 Bootstrap 导航栏在菜单项被单击时折叠?

1aaf6o9v  于 2023-01-06  发布在  Bootstrap
关注(0)|答案(1)|浏览(324)

在移动设备上,我打开响应菜单并单击菜单项<NavLink>。我被转到新页面,但菜单保持打开状态,不会自动折叠。当我第二次单击<NavLink>时,菜单折叠。如何使它在第一次单击<NavLink>后自动折叠?
我使用了默认Blazor模板中的一些代码,看起来可以解决这个问题,但实际上没有。
当菜单通过按钮打开时navbar-collapse div:'

<div class="navbar-collapse justify-content-end collapse show" id="navbarNav" b-8i8utxilae="" style="">
    • 单击一次**时的navbar-collapse div
<div class=" navbar-collapse justify-content-end" id="navbarNav" b-8i8utxilae="" style="">
    • 单击两次**时的navbar-collapse div
<div class="collapse navbar-collapse justify-content-end" id="navbarNav" b-8i8utxilae="" style="">

下面是所有的代码。
一个三个三个一个

r6hnlfcb

r6hnlfcb1#

在切换按钮处,应该用@onclick="ToggleNavMenu"替换data-bs-toggle="collapse" data-bs-target="#navbarNav",这意味着不是让Bootstrap使用JavaScript切换导航菜单,而是应该从Blazor组件手动切换,以便collapseNavMenu bool变量始终与导航菜单的状态同步。

<button type="button" class="navbar-toggler bg-secondary px-1" @onclick="ToggleNavMenu">
    <span class="oi oi-menu text-light m-1"></span>
</button>
<div @onclick="ToggleNavMenu" class="@NavMenuCssClass navbar-collapse justify-content-end">
    <ul class="navbar-nav">
        <li class="nav-item ms-2">
            <NavLink class="nav-link fw-bold" href="" Match="NavLinkMatch.All">
                Home
            </NavLink>
        </li>
    </ul>
</div>

相关问题