twitter-bootstrap Bootstrap 导航栏折叠未在单击时关闭
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28472815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Navbar Collapse not closing on Click
提问by Marc
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?
我正在使用 Bootstrap，它在单页网站上折叠了导航栏和一个简单的滚动脚本，所以如果我点击一个链接，页面会向下滚动到锚点 - 效果很好。但是，当我单击涵盖移动设备上大量内容的链接时，导航栏不会折叠 - 您首先必须单击令人讨厌的切换。我发现将 data-toggle 和 data-target 属性添加到链接应该会有所帮助，但它根本不起作用 - 我的错误在哪里？
NAVIGATION:
导航：
<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>
UPDATE: It's a Javascript problem. My smooth-scroll script causes an issue:
更新：这是一个 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;
});
It's a pretty simple script, but I have no clue what to do with it to make the navbar collapse.
这是一个非常简单的脚本，但我不知道如何使用它来使导航栏崩溃。
回答by camdixon
I would recommend following this a little bit closer to help you out. http://getbootstrap.com/components/#navbarSeems 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.
我建议您稍微关注一下，以帮助您。 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) I changed this part data- toggle="collapse"to data-toggle="collapse". There was just an extra space on line 3.
1) 我把这部分改成data- toggle="collapse"了data-toggle="collapse". 第 3 行只有一个额外的空间。
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.
2）我在你的下拉列表中添加了一个 id 而不是一个类来更具体地识别（可能无关紧要），并将名称更改为“my-navbar-collapse”这个更改是在第 3 行和第 11 行进行的。这之前也意味着你只是在同一个元素上使用同一个类两次，这是没有意义的。
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.
3）我将该类添加"collapsed"到您的类中的第 3 行，位于"hvr-bounce-to-bottom"默认情况下应允许它折叠之后，并且仅在用户打开它时才显示。
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.
这应该有助于修复它，因为它会清理它。另外，当您切换而不是列出的主按钮时，您的导航栏中是否有一个下拉菜单需要重新打开？似乎还没有，只是要求确保它清楚。
回答by Michael Carolan
I know this is a bit late coming in however, even in Bootstrap 4.0.0-alpha.6; the navbar does NOT inherently close after a menu item selection. The docs at Bootsrap have gotten better - but there is NO clear-cut example on how to get the navbar to close after a new menu selection.
我知道这有点晚了，即使在 Bootstrap 4.0.0-alpha.6 中也是如此；选择菜单项后，导航栏不会固有地关闭。Bootsrap 的文档已经变得更好 - 但没有关于如何在新菜单选择后关闭导航栏的明确示例。
In your html file - you go to the target div for the collapse class - the div I'm sowing below came strait from the Bootstrap site - so nothing has changed on that note:
在您的 html 文件中-您转到折叠类的目标 div-我在下面播种的 div 来自 Bootstrap 站点的海峡-因此该注释上没有任何更改：
<div class="collapse navbar-collapse" id="navbarSupportedContent">
You use that id to monitor if the navbar is expanded (out of collapsed mode), then I added a click event to the a.nav-links in the navbar that re-collapses the navbar:
您使用该 id 来监视导航栏是否已展开（超出折叠模式），然后我向导航栏中的 a.nav-links 添加了一个单击事件以重新折叠导航栏：
$("#navbarSupportedContent").on('show.bs.collapse', function() {
$('a.nav-link').click(function() {
$("#navbarSupportedContent").collapse('hide');
});
});
回答by Kunle
$(document).ready(function () {
$(".navbar-nav li.trigger-collapse a").click(function(event) {
$(".navbar-collapse").collapse('hide');
});
});
回答by edson-
The only problem with the solution above and the JSFiddle (jsfiddle.net/camdixon/v2gosj5s) is that when you are not on a mobile device, and the menu is not collapsed, the menu items blink. E.g. they collapse in place and reopen in place.
上述解决方案和 JSFiddle (jsfiddle.net/camdixon/v2gosj5s) 的唯一问题是，当您不在移动设备上且菜单未折叠时，菜单项会闪烁。例如，它们原地塌陷并原地重新打开。
To repeat: expand the window of the JSFiddle result so that the menu is not collapsed, then click on a navbar item.
重复：展开 JSFiddle 结果的窗口，以便菜单不会折叠，然后单击导航栏项目。
I've sort of solved the issue in addition to the JSFiddle version by altering the collapse data api in bootstrap.js as follows:
除了 JSFiddle 版本之外，我还通过更改 bootstrap.js 中的折叠数据 api 解决了这个问题，如下所示：
//Bootstrap v3.3.4
//line 662:
Collapse.prototype.toggle = function () {
//Added code:
var mq = window.matchMedia('screen and (min-width: 768px)')
if (mq.matches) return
//End added code
this[this.$element.hasClass('in') ? 'hide' : 'show']()
}
I'd rather not hardcode the min-width, but don't yet know how I would access the media query values in the css (see @screen-sm-min in less).
我宁愿不对最小宽度进行硬编码，但还不知道如何访问 css 中的媒体查询值（参见 @screen-sm-min in less）。
