Bootstrap Navbar Collapse 不会在点击时关闭

Question

我正在使用 Bootstrap，它在单页网站上折叠了导航栏，并带有一个简单的滚动脚本，因此如果我单击单个链接，页面将向下滚动到锚点 - 效果很好。然而，当我点击一个包含移动设备上大量内容的链接时，导航栏不会崩溃——你首先必须点击切换按钮，这很烦人。我发现将 data-toggle 和 data-target 属性添加到链接应该会有所帮助，但它根本不起作用 - 我的错误在哪里？

导航：

 <nav class="navbar navbar-default mainbar" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle hvr-bounce-to-bottom" data- toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
    </div>

    <div class="collapse navbar-collapse navbar-collapse">
      <ul class="nav navbar-nav">
         <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#link1" class="navelement">Link 1</a></li>

         <li><a data-toggle="collapse" data-target=".navbar-collapse" href="#link2" class="navelement">Link 2</a></li>

       </ul>
     </div>
</nav>

更新：这是一个 Javascript 问题。我的平滑滚动脚本导致了一个问题：

   var corp = $("html, body");
  $(".navelement").click(function() {
    var flag = $.attr(this, "href");
    corp.animate({
        scrollTop: $(schild).offset().top - 60
    }, 1600, function() {
        window.location.hash = flag;
    });
    return false;
});

这是一个非常简单的脚本，但我不知道如何使用它来使导航栏折叠。

原文由 Marc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用上面的示例，对我有用的是将 data-toggle=“collapse” data-target=“.navbar-collapse” 添加到外部 div

 <div class="collapse navbar-collapse" id="my-navbar-collapse">

<div class="collapse navbar-collapse" id="my-navbar-collapse" toggle="collapse" data-target=".navbar-collapse">

整个菜单看起来像这样变化：

  <nav class="navbar navbar-expand-xl navbar-light bg-light">
  <a class="navbar-brand" href="#">Main</a>
  <button class="navbar-toggler" 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" data-toggle="collapse" data-target=".navbar-collapse" >
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" routerLink="/home">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" routerLink="/guitars">Guitars <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" routerLink="/nasa-image">NASA Image</a>
          <a class="dropdown-item disabled" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item disabled" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>

  </div>
    </nav>

原文由 Ken 发布，翻译遵循 CC BY-SA 4.0 许可协议