Bootstrap Navbar折叠在单击时未关闭 [英] Bootstrap Navbar Collapse not closing on Click

问题描述

我正在Bootstrap网站上将其折叠的Navbar与一个简单的滚动脚本一起使用，因此，如果我单击单个链接，该页面将向下滚动以定位-效果很好.但是，当我单击包含移动设备上很多内容的链接时，导航栏不会折叠-您首先必须单击令人讨厌的切换.我发现将data-toggle和data-target属性添加到链接中应该会有所帮助，但这根本不起作用-我的错误在哪里?

I'm using Bootstrap an it's collapsed Navbar on a one-page website together with a simple scrolling script, so if I click on a single link the page scrolls down to anchor - works great. However the Navbar does not collapse when I click on a link which covers a lot of content on mobile devices - you first have to click on the toggle which is annoying. I found out that it should help to add the data-toggle and data-target attributes to the links, but it doesn't work at all - where is my mistake?

导航:

<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问题.我的平滑滚动脚本导致出现问题:

UPDATE: It's a Javascript problem. My smooth-scroll script causes an issue:

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

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

It's a pretty simple script, but I have no clue what to do with it to make the navbar collapse.

推荐答案

我建议您再仔细一点以帮助您. http://getbootstrap.com/components/#navbar 似乎是您所基于的. 主要是，当您查看该链接时，请查看您拥有的第一条按钮行并进行比较，因为这是您移动版本的主要下拉列表，如您所述，它占用了大量屏幕空间.

I would recommend following this a little bit closer to help you out. http://getbootstrap.com/components/#navbar Seems to be what you are basing it off of. Mainly, when you look @ that link, look at the first button line that you have and compare as that is your main drop down on the mobile version which takes up lots of screen real estate as you mentioned.

<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行只有一个多余的空间.

1) I changed this part data- toggle="collapse" to data-toggle="collapse". There was just an extra space on line 3.

2)我在您的下拉列表中添加了一个ID，而不是一个类，以更具体地标识(可能不重要)，并且还将名称更改为"my-navbar-collapse".此更改是在第3行和第11行进行的.这以前意味着您只是在同一个元素上对相同的类使用了两次，但这没什么意义.

2) I added an id to your drop down instead of a class to identify more particularly (may not matter) and also changed the name to "my-navbar-collapse" This change was made on lines 3 and 11. Also this previously means you were just using the same class twice on the same element which didn't make sense.

3)我在"hvr-bounce-to-bottom"之后的第3行中将类"collapsed"添加到您的类中，默认情况下应允许将其折叠，并且仅显示它是否由用户打开.

3) I added the class "collapsed" into your class on line 3 located after "hvr-bounce-to-bottom" Should allow it to be collapsed by default, and only show if it is opened by the user.

这应该有助于修复它，因为它清理了它.另外，您在导航栏上是否有一个下拉菜单，当您切换列出的主按钮以外的其他按钮时，是否需要将其下拉?似乎还没有，只是要求确保它清楚.

That should help fix it as it cleans it up. Also, do you have a drop down in your nav bar that needs to be brought back up when you toggle other than the main button you listed? Doesn't seem so as of yet, just asking to make sure it's clear.

这篇关于Bootstrap Navbar折叠在单击时未关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！