尝试实现汉堡菜单时桌面上的菜单闪烁

问题描述

我认为这很简单，但我找不到答案。基本上，要在移动设备上的“汉堡包模式”中单击菜单项时关闭引导导航栏，我在其他帖子中添加了data-toggle="collapse"。但是，如果不在桌面上的汉堡包模式下，也会触发此效果。并在菜单中引起奇怪的行为。如果有帮助，这是一个有角度的项目。如果有任何指令，我可以申请使此行为仅存在于移动视图中？这是我的导航栏组件的HTML：

<div class="float-navbar">
  <div class="row no-gutters">
    <div class="col-3">
      <img class="logo-img" src="\assets\rg_logo_clean_sm.png" style="position: fixed;z-index: 1;" />
    </div>
    <div class="col-9">

      <nav class="navbar navbar-expand-lg navbar-dark header-row backGrd-color">

        <a class="navbar-brand" href="#"></a>

        <button class="navbar-toggler" style="color: white;" type="button" data-toggle="collapse"
          data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
          aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse "  id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto " style="align-items: flex-end;">
            <li class="nav-item active ">
              <a class="nav-link"  routerLink="" data-toggle="collapse" data-target=".navbar-collapse">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse">Boot Camp</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse">News</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse">Coaching</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLink="/members" data-toggle="collapse" data-target=".navbar-collapse">Members</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse" role="button">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" data-toggle="collapse" data-target=".navbar-collapse">Sponsors</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）