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

时间:2020-09-23 13:26:09

标签: angular bootstrap-4 angular-ui-bootstrap

我认为这很简单,但我找不到答案。基本上,要在移动设备上的“汉堡包模式”中单击菜单项时关闭引导导航栏,我在其他帖子中添加了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>

0 个答案:

没有答案