Question

我尝试实现两层导航栏，第二张导航栏在第一个导航栏中单击链接时会显示其各自的选项。

我尝试使用id和data-target按照documentation中的说明实现它，但插件似乎无法正常工作且ngx-bootstrap尚未开发导航栏模块。

HTML

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarLevelOne">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">BRAND</a>
  <div class="collapse navbar-collapse" id="navbarLevelOne">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" data-toggle="collapse" routerLinkActive="active"  data-target="#a">A</a></li>
      <li class="nav-item"><a class="nav-link" data-toggle="collapse" routerLinkActive="active"  data-target="#b">B</a></li>
      <li class="nav-item"><a class="nav-link" data-toggle="collapse" routerLinkActive="active"  data-target="#c">C</a></li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav" id="a" >
      <li class="nav-item"><a class="nav-link" href="#">a</a></li>
      <li class="nav-item"><a class="nav-link" href="#">b</a></li>
      <li class="nav-item"><a class="nav-link" href="#">c</a></li>        
    </ul>
    <ul class="navbar-nav" id="b" >
      <li class="nav-item"><a class="nav-link" href="#">p</a></li>
      <li class="nav-item"><a class="nav-link" href="#">q</a></li>
      <li class="nav-item"><a class="nav-link" href="#">r</a></li>        
    </ul>
    <ul class="navbar-nav" id="c" >
      <li class="nav-item"><a class="nav-link" href="#">x</a></li>
      <li class="nav-item"><a class="nav-link" href="#">y</a></li>
      <li class="nav-item"><a class="nav-link" href="#">z</a></li>        
    </ul>
  </div>
</nav>

Answer 1

在您拥有subnav的部分中。尝试将三个导航列表移动到他们自己的＆＃34;崩溃div＆＃34;。像这样：

setNav(s: string) {
    this.a = false;
    this.b = false;
    this.c = false;

    switch (s) {
      case 'a':
        this.a = true;
        break;
      case 'b':
        this.b = true;
        break;
      case 'c':
        this.c = true;
        break;
    }
  }

当您单击触发折叠功能的按钮时，它仅触发指定的部分。因此，如果您显示A部分，然后单击以显示B部分，A仍将存在。要解决这个问题，请输入＆＃34; * ngIf＆＃34;在每个部分上（就像我上面所做的那样），只有当A和C和B相同时，A部分才会可见。

要使其工作，请在app.component.ts类中创建一个简单的函数：

<li class="nav-item"><a class="nav-link" data-toggle="collapse" routerLinkActive="active"  data-target="#a" (click)="setNav('a')">A</a></li>

然后在主导航中的每个按钮上点击事件：

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarLevelOne">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">BRAND</a>
  <div class="collapse navbar-collapse" id="navbarLevelOne">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" data-toggle="collapse" routerLinkActive="active"  data-target="#a" (click)="setNav('a')">A</a></li>
      <li class="nav-item"><a class="nav-link" data-toggle="collapse" routerLinkActive="active"  data-target="#b" (click)="setNav('b')">B</a></li>
      <li class="nav-item"><a class="nav-link" data-toggle="collapse" routerLinkActive="active"  data-target="#c" (click)="setNav('c')">C</a></li>
    </ul>
  </div>
</nav>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <div class="collapse" id="a" *ngIf="a">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">a</a></li>
      <li class="nav-item"><a class="nav-link" href="#">b</a></li>
      <li class="nav-item"><a class="nav-link" href="#">c</a></li>
    </ul>
  </div>
  <div class="collapse" id="b" *ngIf="b">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">p</a></li>
      <li class="nav-item"><a class="nav-link" href="#">q</a></li>
      <li class="nav-item"><a class="nav-link" href="#">r</a></li>
    </ul>
  </div>
  <div class="collapse" id="c" *ngIf="c">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#">x</a></li>
      <li class="nav-item"><a class="nav-link" href="#">y</a></li>
      <li class="nav-item"><a class="nav-link" href="#">z</a></li>
    </ul>
  </div>
</nav>

然后是完整的HTML：

{{1}}

希望它能解决问题。

Angular4-Bootstrap4：从导航栏

1 个答案: