Question

我正在尝试使用数据切换功能在大小适中时折叠和展开导航栏中的菜单项。下面是我试图实现该功能的代码，但它无法正常工作。

<div class="container-fluid">
        <div class='row' style='background-color: tomato; padding: 5px'>
          <div class='col-md-12'>
            <app-main-heading></app-main-heading>
          </div>
        </div>
        <div class="row">
          <div class='col-md-12'>
            <nav class='navbar navbar-expand-sm bg-dark navbar-dark'>
              <a href='#'></a>
              <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="false"
                aria-controls="navbar">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link" routerLink="/firstmenu">FirstMenu</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" routerLink="/secondmenu">SecondMenu</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" routerLink="/thirdmenu">ThirdMenu</a>
                  </li>
                </ul>
              </div>
            </nav>
          </div>
        </div>
        <div class='row'>
          <router-outlet></router-outlet>
        </div>
      </div>

当我点击导航栏上的切换按钮时，我无法折叠和展开。

任何人都可以在我做错的地方帮助我。

Answer 1

虽然我在角度5项目中尝试了bootstrap 4 navbar，但遇到了类似的问题。为了处理这种情况，我必须安装引导程序的依赖项，如jquery和popper techiediaries.com。替代方法使用NgBootstrap，没有这两个步骤，

我找到了另一种解决问题的方法。

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="index.html">Start Bootstrap</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" (click)="isMenuCollapse = !isMenuCollapse">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class=" navbar-collapse" [ngClass]="{'collapse': isMenuCollapse}"  (click)="isMenuCollapse = !isMenuCollapse">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="about.html">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="services.html">Services</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

我希望这会对你有所帮助。

data-toggle无法在角度4中工作

1 个答案: