Bootstrap 导航栏折叠未在单击时关闭

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;
});

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

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>

Answer 2

我知道这有点晚了，即使在 Bootstrap 4.0.0-alpha.6 中也是如此；选择菜单项后，导航栏不会固有地关闭。Bootsrap 的文档已经变得更好 - 但是没有关于如何在新菜单选择后关闭导航栏的明确示例。

在您的 html 文件中-您转到折叠类的目标 div-我在下面播种的 div 来自 Bootstrap 站点的海峡-因此该注释没有任何更改：

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

您使用该 ID 来监视导航栏是否已展开（超出折叠模式），然后我向导航栏中的 a.nav-links 添加了一个单击事件以重新折叠导航栏：

$("#navbarSupportedContent").on('show.bs.collapse', function() {
    $('a.nav-link').click(function() {
        $("#navbarSupportedContent").collapse('hide');
    });
});

Answer 3

我建议您仔细阅读此内容以帮助您解决问题。 http://getbootstrap.com/components/#navbar 似乎是你所基于的。主要是，当您查看该链接时，请查看您拥有的第一个按钮行并进行比较，因为这是移动版本上的主要下拉列表，正如您提到的，它占用了大量的屏幕空间。

<nav class="navbar navbar-default mainbar" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle hvr-bounce-to-bottom collapsed" data-toggle="collapse" data-target="#my-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" id="my-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>

1）我将这部分更改data- toggle="collapse"为data-toggle="collapse". 第 3 行只是多了一个空格。

2) 我在下拉列表中添加了一个 id，而不是一个类，以更具体地标识（可能无关紧要），并将名称更改为“my-navbar-collapse”。此更改是在第 3 行和第 11 行进行的。这也意味着以前的您只是在同一个元素上使用同一个类两次，这是没有意义的。

3）我将类添加"collapsed"到第 3 行的类中，位于“"hvr-bounce-to-bottom" 应该允许它默认折叠”之后，并且仅在用户打开它时才显示。

这应该有助于修复它并清理它。另外，您的导航栏中是否有一个下拉菜单，当您切换除列出的主按钮之外的其他按钮时，需要将其恢复？目前看来还不是这样，只是想确认一下。