BlazorStrap Navbar折叠按钮点击无响应问题求助

我使用BlazorStrap的Navbar组件时遇到问题：屏幕宽度缩小时，折叠切换按钮正常显示，但点击后无法展开菜单。

环境配置 #

• 创建Blazor Server应用的命令：

dotnet new blazor -o BlazorIndNone -au Individual -int Server
dotnet add package blazorstrap
dotnet add package blazorstrap.V5

• Program.cs配置：

using BlazorStrap;
builder.Services.AddBlazorStrap(options =>
{
    options.ShowDebugMessages = true;
});

• App.razor代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />

    <link rel="stylesheet" href="BlazorApp3.styles.css" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/BlazorStrap/popper.min.js"></script>
    <script src="_content/BlazorStrap/blazorstrap.js"></script>
</body>
</html>

• Nav.razor代码：

<BSNavbar Color="BSColor.Light">
    <BSContainer Container="Container.Fluid">
        <BSNavbarBrand>Navbar</BSNavbarBrand>
        <BSCollapse IsInNavbar="true">
            <Toggler>
                <BSNavbarToggle />
            </Toggler>
            <Content>
                <BSNav MarginEnd="Margins.Auto" MarginBottom="Margins.Small" Class="mb-lg-0">
                    <BSNavItem IsActive="true" Url="javascript:void(0);">Home</BSNavItem>
                    <BSNavItem Url="javascript:void(0);">Link</BSNavItem>
                    <BSNavItem IsDropdown="true">
                        <BSDropdown IsNavPopper="true" Placement="Placement.BottomEnd">
                            <Toggler><BSToggle IsNavLink="true">Dropdown</BSToggle></Toggler>
                            <Content>
                                <BSDropdownItem Url="javascript:void(0);">Action</BSDropdownItem>
                                <BSDropdownItem Url="javascript:void(0);">Another action</BSDropdownItem>
                                <BSDropdownItem IsDivider="true" />
                                <BSDropdownItem Url="javascript:void(0);">Something else here</BSDropdownItem>
                            </Content>
                        </BSDropdown>
                    </BSNavItem>
                    <BSNavItem Url="javascript:void(0);" IsDisabled="true">Disabled</BSNavItem>
                </BSNav>
            </Content>
        </BSCollapse>
        <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <BSButton Color="BSColor.Success" IsOutlined="true">Search</BSButton>
        </form>
    </BSContainer>
</BSNavbar>

解决方法 #

问题根源是BSCollapse组件缺少绑定的状态变量来控制折叠/展开状态，BlazorStrap需要通过双向绑定管理该状态。修改Nav.razor代码如下：

1. 添加状态变量跟踪折叠状态：

@code {
    private bool isCollapsed = true;
}

2. 给BSCollapse添加双向绑定：

<BSCollapse IsInNavbar="true" @bind-IsOpen="isCollapsed">

修改后的完整Nav.razor代码：

<BSNavbar Color="BSColor.Light">
    <BSContainer Container="Container.Fluid">
        <BSNavbarBrand>Navbar</BSNavbarBrand>
        <BSCollapse IsInNavbar="true" @bind-IsOpen="isCollapsed">
            <Toggler>
                <BSNavbarToggle />
            </Toggler>
            <Content>
                <BSNav MarginEnd="Margins.Auto" MarginBottom="Margins.Small" Class="mb-lg-0">
                    <BSNavItem IsActive="true" Url="javascript:void(0);">Home</BSNavItem>
                    <BSNavItem Url="javascript:void(0);">Link</BSNavItem>
                    <BSNavItem IsDropdown="true">
                        <BSDropdown IsNavPopper="true" Placement="Placement.BottomEnd">
                            <Toggler><BSToggle IsNavLink="true">Dropdown</BSToggle></Toggler>
                            <Content>
                                <BSDropdownItem Url="javascript:void(0);">Action</BSDropdownItem>
                                <BSDropdownItem Url="javascript:void(0);">Another action</BSDropdownItem>
                                <BSDropdownItem IsDivider="true" />
                                <BSDropdownItem Url="javascript:void(0);">Something else here</BSDropdownItem>
                            </Content>
                        </BSDropdown>
                    </BSNavItem>
                    <BSNavItem Url="javascript:void(0);" IsDisabled="true">Disabled</BSNavItem>
                </BSNav>
            </Content>
        </BSCollapse>
        <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <BSButton Color="BSColor.Success" IsOutlined="true">Search</BSButton>
        </form>
    </BSContainer>
</BSNavbar>

@code {
    private bool isCollapsed = true;
}

另外确认App.razor中脚本顺序，确保blazor.web.js在BlazorStrap相关脚本之前加载（现有代码已符合要求，无需修改）。

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