ASP.NET Blazor中如何点击菜单项时自动折叠Bootstrap导航栏

问题根源 #

你的代码同时混用了Bootstrap原生折叠JS（按钮的data-bs-toggle）和Blazor变量控制菜单状态，导致两者状态不同步；另外点击NavLink路由跳转后，没有主动触发菜单折叠逻辑，需要手动干预。

修复步骤 #

1. 统一菜单状态控制逻辑，移除Bootstrap原生JS依赖

把按钮的data-bs-toggle和data-bs-target属性去掉，改用Blazor的点击事件来控制菜单状态，避免双重控制导致的冲突：

<button type="button" class="navbar-toggler bg-secondary px-1" 
        @onclick="ToggleNavMenu" 
        aria-expanded="@(!collapseNavMenu)" 
        aria-label="Toggle navigation">
    <span class="oi oi-menu text-light m-1"></span>
</button>

同时调整菜单容器的class顺序，确保Blazor的状态类正确生效：

<div class="navbar-collapse justify-content-end @NavMenuCssClass" id="navbarNav">

2. 添加路由跳转时自动折叠菜单的逻辑

注入NavigationManager，监听路由变化事件，只要路由跳转（无论是点击NavLink还是浏览器前进后退），就自动折叠菜单：

@inject NavigationManager NavManager

<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" 
                @onclick="ToggleNavMenu" 
                aria-expanded="@(!collapseNavMenu)" 
                aria-label="Toggle navigation">
            <span class="oi oi-menu text-light m-1"></span>
        </button>
        <div class="navbar-collapse justify-content-end @NavMenuCssClass" 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;

    protected override void OnInitialized()
    {
        // 监听路由变化，自动折叠菜单
        NavManager.LocationChanged += (_, __) =>
        {
            collapseNavMenu = true;
            StateHasChanged();
        };
    }

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

3. （可选）给NavLink添加点击折叠逻辑（补充方案）

如果不需要监听所有路由变化，也可以直接给每个NavLink添加点击事件，强制折叠菜单，并阻止事件冒泡（避免触发菜单容器的onclick导致状态反转）：

<NavLink class="nav-link fw-bold" href="" Match="NavLinkMatch.All" 
         @onclick="CollapseNavMenu" 
         @onclick:stopPropagation>
    Home
</NavLink>

然后在@code里添加方法：

private void CollapseNavMenu()
{
    collapseNavMenu = true;
}

为什么之前的代码失效？ #

• 按钮用Bootstrap原生JS控制折叠，和Blazor的collapseNavMenu变量是两套独立状态，点击按钮后Blazor变量没更新，导致后续点击NavLink时状态混乱。
• 路由跳转是SPA内部跳转，页面不刷新，Bootstrap不会自动重置折叠状态，必须手动触发折叠逻辑。

内容的提问来源于stack exchange，提问作者Tanksley