Question

我创建了带有下拉菜单的导航栏。当我单击导航栏选项卡时，将加载我的内容

    <div class="navbar navbar-light bg-faded">
      <ul class="nav navbar-nav">
        <a class="nav-item nav-link active" data-toggle="tab" href="#one">One</a>
        <a class="nav-item nav-link" data-toggle="tab" href="#two">Two</a>
        <a class="nav-link dropdown-toggle" id="navbardrop"
          data-toggle="dropdown" href="#three">Three</a>
        <div class="dropdown-menu dropdown-menu-center">
          <a class="dropdown-item" href='#threeA'>Three_A</a>
          <a class="dropdown-item" href='#threeB'>Three_B</a>
        </div>
      </ul>
    </div>

    <div class="tab-content">
      <div class="tab-pane active" id="one">1</div>
      <div class="tab-pane" id="two">2</div>
      <div class="tab-pane" id="three/threeA">3a</div>
      <div class="tab-pane" id="three/threeB">3b</div>
    </div>

我在href中提到并加载了ID。但是，如果我单击下拉列表，它将无法正常工作。

Answer 1

不幸的是，Bootstrap 4需要使用jQuery。可以使用NgBootstrap代替默认的Bootstrap 4。他们有一个NgbDropdown component，我可以在导航栏中轻松实现

<div ngbDropdown>
    <a class="nav-link dropdown-toggle" ngbDropdownToggle">Open Dropdown</a>
    <div ngbDropdownMenu>
        <a routerLink="link/to/page1">Link 1</a>
        <a routerLink="link/to/page2">Link 2</a>
        <a routerLink="link/to/page3">Link 3</a>
    </div>
</div>

如何在引导程序4中加载导航栏下拉列表内容？

1 个答案: