侧边栏下拉菜单展开正常收起时主菜单消失如何排查解决？

问题根源 #

• 代码存在ID属性重复的问题：触发折叠操作的主菜单<a>标签，和待折叠的子菜单<ul>标签都使用了equitiesSubmenu作为ID值
• Bootstrap的Collapse组件会根据ID匹配需要折叠的目标元素，重复ID会导致触发折叠操作的主菜单链接本身被识别为折叠目标，因此执行收起操作时主菜单会同步被隐藏

修复方案 #

仅需要调整HTML代码中主菜单<a>标签的ID属性，保证ID全局唯一即可，CSS代码无需修改：

<!-- Sidebar menus -->
<ul class="navbar-nav d-flex flex-column w-100">    
  <hr class="style-one">
    <li class="nav-item dropdown w-100">
      <!-- 仅修改此处的id属性，避免和子菜单id重复即可 -->
      <a href="#equitiesSubmenu" class="nav-link dropdown-toggle text-light pl-4" id="equitiesDropdownTrigger" role="button" data-bs-toggle="collapse" aria-expanded="true">
        <svg class="bi bi-currency-dollar" width="16" height="20" fill-rule="evenodd" clip-rule="evenodd" fill="currentColor"><use xlink:href="#dollarSign"/></svg>
        Equities
      </a>
      <ul class="collapse list-unstyled" id="equitiesSubmenu">
          <li><a href="{{url_for('core.simulator')}}" class="dropdown-item text-light pl-4 p-2">Simulator</a></li>
          <li><a href="{{url_for('core.portfolio')}}" class="dropdown-item text-light pl-4 p-2">Portfolio</a></li>
      </ul>
    </li>
</ul>

异常效果参考 #

展开正常状态：

收起异常状态：

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