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

1aaf6o9v 于 2023-01-06 发布在 Bootstrap

关注(0)|答案(1)|浏览(287)

在移动设备上，我打开响应菜单并单击菜单项<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="">

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/74965826/using-asp-net-blazor-how-do-i-make-bootstrap-navbar-collapse-when-menu-item-is

1条答案

按热度按时间

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>

赞(0）回复(0）举报 2023-01-06

我来回答

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

1条答案

相关问题

热门标签

最新问答