Blazor Server项目中Bootstrap 5侧边栏导航点击后折叠随即展开的问题排查及默认折叠设置

问题1：点击导航按钮时折叠面板反复关闭又展开 #

这个问题的核心是Blazor的CSS隔离样式和Bootstrap的Collapse组件样式冲突了。你已经排查到删除NavMenu.Razor.css中强制设置.collapse { display: block; }的代码后问题解决，这是因为：

• Bootstrap的Collapse组件是通过添加/移除show类来控制面板的显示与隐藏；
• 你自定义的.collapse { display: block; }样式强制让所有折叠面板始终显示，导致Bootstrap JS切换状态时，样式冲突出现“先关闭再自动展开”的闪烁现象。

后续如果需要自定义侧边栏的折叠样式，建议使用更具体的CSS选择器来限定范围，避免全局覆盖Bootstrap的核心样式，比如：

/* 只针对侧边栏内的collapse容器设置样式 */
.sidebarmain .collapse {
  /* 你的自定义样式 */
}

问题2：设置侧边栏默认折叠状态 #

要让所有侧边栏面板默认处于折叠状态，只需要调整两部分代码：

1. 给所有折叠按钮添加collapsed类，并将aria-expanded属性设为false；
2. 移除所有折叠面板容器的show类。

以Home菜单为例，修改前后的代码对比：

修改前：

<button class="btn btn-toggle align-items-center rounded" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="true">
  Home
</button>
<div class="collapse show" id="home-collapse">
  <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
    <li>
      <a href="/" class="link-dark rounded">Dashboard</a>
    </li>
  </ul>
</div>

修改后：

<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="false">
  Home
</button>
<div class="collapse" id="home-collapse">
  <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
    <li>
      <a href="/" class="link-dark rounded">Dashboard</a>
    </li>
  </ul>
</div>

按照这个方式，把Orders、Vendors等其他菜单的对应属性和类都调整一遍，就能实现所有面板默认折叠的效果。

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