Blazor WASM中Bootstrap 5 Productos子菜单无法显示问题求助

1. 确认Bootstrap 5依赖正确引入 #

在wwwroot/index.html里必须按顺序加载Bootstrap的CSS和JS（Bootstrap 5依赖Popper.js）：

<!-- 放在head标签内 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 放在body标签末尾，顺序不能乱 -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

2. 修正子菜单的Bootstrap结构规范 #

确保Productos子菜单的HTML结构完全符合Bootstrap 5折叠组件要求，避免Blazor路由逻辑干扰：

<div class="nav-item">
    <!-- 用button触发折叠，避免NavLink的路由跳转冲突 -->
    <button class="nav-link btn btn-link" 
            data-bs-toggle="collapse" 
            data-bs-target="#productosSubmenu" 
            aria-expanded="false">
        Productos
    </button>
    <!-- 子菜单容器，id要和data-bs-target完全匹配 -->
    <div class="collapse" id="productosSubmenu">
        <div class="nav flex-column ms-3">
            <NavLink class="nav-link" href="productos/lista">
                Lista de Productos
            </NavLink>
            <NavLink class="nav-link" href="productos/nuevo">
                Nuevo Producto
            </NavLink>
        </div>
    </div>
</div>

3. 解决Blazor事件冒泡冲突 #

如果点击菜单时折叠效果被Blazor的导航事件打断，给触发按钮添加阻止冒泡的指令：

<button class="nav-link btn btn-link" 
        data-bs-toggle="collapse" 
        data-bs-target="#productosSubmenu" 
        aria-expanded="false"
        @onclick:stopPropagation>
    Productos
</button>

4. 动态菜单需手动初始化折叠组件 #

如果Productos子菜单是动态渲染的（比如从后端获取菜单数据），在组件渲染完成后手动初始化Bootstrap折叠实例：

@inject IJSRuntime JSRuntime

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("bootstrap.Collapse.getOrCreateInstance", "#productosSubmenu");
        }
    }
}

5. 排查样式覆盖问题 #

打开浏览器开发者工具，检查.collapse类的display属性是否被自定义样式覆盖。如果被覆盖，添加强制生效的CSS：

.collapse {
    display: none !important;
}
.collapse.show {
    display: block !important;
}

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