javascript - Bootstrap 下拉菜单不会在点击导航时关闭

Question

这是我在 html 页面上使用的代码。出现下拉菜单，但一旦我单击链接，它就会转到目的地，但菜单不会关闭。它停留在下拉列表中。

我该如何解决？

<div class="col-lg-8 col-md-8 col-xs-2 accordion-menu">
  <button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#navbar-collapse-toggle-1">
     <span class="sr-only">toggle navigation</span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
     <span class="icon-bar"></span>
  </button>
  <div class="navbar-collapse collapse pull-right" id="navbar-collapse-toggle-1">
    <ul class="nav navbar-nav navbar-left panel-group no-margin alt-font font-weight-700">
      <li><a href="#home" title="Home" class="inner-link" style="font-family:roboto;">Home</a></li>
      <li><a href="#creative" title="About" class="inner-link" style="font-family:roboto;">About</a></li>
      <li><a href="#our" title="Treatment" class="inner-link" style="font-family:roboto;">Treatment</a></li>
      <li><a href="#Aliments" title="Diseases" class="inner-link" style="font-family:roboto;">Diseases</a></li>
      <li><a href="#Therapy" title="Therapy" class="inner-link" style="font-family:roboto;">Therapy</a></li>
      <li><a href="#testimonial" title="Testimonials" class="inner-link" style="font-family:roboto;">Testimonials</a></li>
      <li><a href="#faq" title="FAQ" class="inner-link" style="font-family:roboto;">FAQ</a></li>
      <li><a href="#us" title="Contact US" class="inner-link" style="font-family:roboto;">Contact US</a></li>
    </ul>
  </div>
</div>

Answer 1

@Dash，请使用 bootstrap 4 检查下面的工作示例，希望它对你有帮助:)

<link href="http://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-lg-8 col-md-8 col-xs-2">
  <nav class="navbar">
    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon">toggle navigation</span>
    </button>
    <div class="navbar-collapse collapse" id="navbarsExample01">
      <ul class="navbar-nav m-0 alt-font font-weight-700">
        <li class="nav-item active"><a href="#home" title="Home" class="nav-link" style="font-family:roboto;">Home</a></li>
        <li class="nav-item"><a href="#creative" title="About" class="nav-link" style="font-family:roboto;">About</a></li>
        <li class="nav-item"><a href="#our" title="Treatment" class="nav-link" style="font-family:roboto;">Treatment</a></li>
        <li class="nav-item"><a href="#Aliments" title="Diseases" class="nav-link" style="font-family:roboto;">Diseases</a></li>
        <li class="nav-item"><a href="#Therapy" title="Therapy" class="nav-link" style="font-family:roboto;">Therapy</a></li>
        <li class="nav-item"><a href="#testimonial" title="Testimonials" class="nav-link" style="font-family:roboto;">Testimonials</a></li>
        <li class="nav-item"><a href="#faq" title="FAQ" class="nav-link" style="font-family:roboto;">FAQ</a></li>
        <li class="nav-item"><a href="#us" title="Contact US" class="nav-link" style="font-family:roboto;">Contact US</a></li>
      </ul>
    </div>
  </nav>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="http://getbootstrap.com/docs/4.1/dist/js/bootstrap.min.js"></script>