使用ASP.. NET Blazor，我如何使引导导航栏崩溃时，菜单项单击?

Question

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

下面是所有的代码。

<nav class="navbar navbar-expand-sm">
<div class="container">
<div class="d-inline-block" style="width: 50px;">
<a class="navbar-brand fw-bold" href="/">
<img class="w-100 me-3 my-2" src="/images/Magnolia_white.png" alt="no image" />
<span class="no-mobile">Magnolia</span>
</a>
</div>
<button type="button" class="navbar-toggler bg-secondary px-1" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu text-light m-1"></span>
</button>
<div onclick="@ToggleNavMenu" class="@NavMenuCssClass navbar-collapse justify-content-end" id="navbarNav">
<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>
</div>
</nav>

@code {
private bool collapseNavMenu = true;
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}

Answer 1

创建一个Javascript函数来调用Bootstrap折叠方法。保持菜单动画

在您的Blazor组件中放入以下内容:

<li class="nav-item">
<NavLink href="/Calendar" @onclick="CollapseMenu" class="nav-link">
Calendar
</NavLink>
</li>
async void CollapseMenu() => await JSRuntime.InvokeVoidAsync("myApp.collapseMenu");

在你的Javascript文件中放入以下内容:

myApp.collapseMenu = function () {
let navbar = document.getElementById("myNavbar");
if (navbar != null) {
bootstrap.Collapse.getInstance(navbar).hide();
}
};

文档在这里找到，https://getbootstrap.com/docs/5.3/components/collapse/#usage

Bootstrap文档提供了以下示例。然而，这段代码将折叠页面上带有.collapse类的每个元素。我在页面上有其他可折叠的元素，我不想折叠，于是想到了上面的解决方案。

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Answer 2

在切换按钮处，您应该将data-bs-toggle="collapse" data-bs-target="#navbarNav"替换为@onclick="ToggleNavMenu"。这意味着，而不是让Bootstrap用JavaScript切换导航菜单，你应该从Blazor组件手动完成它，这样collapseNavMenubool变量总是与导航菜单的状态同步。

<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>