twitter-bootstrap 自动关闭响应式导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14248194/
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
Close responsive navbar automatically
提问by hajpoj
I'm using a Bootstrap responsive navbar. When the navbar is collapsed and I open the menu and click on a menu item, the menu doesn't close automatically, and I have to do it myself manually.
我正在使用 Bootstrap 响应式导航栏。当导航栏折叠并且我打开菜单并单击菜单项时，菜单不会自动关闭，我必须自己手动完成。
Is it possible to make the menu close automatically after clicking on one of the buttons?
单击其中一个按钮后是否可以使菜单自动关闭？
回答by Maximus
Working solution for bootstrap 3
引导程序 3 的工作解决方案
$('.navbar-collapse a').click(function(){
$(".navbar-collapse").collapse('hide');
});
回答by hajpoj
Edit:As Maximuspoints out below, the 3.x bootstrapsolution is:
编辑：正如Maximus在下面指出的，3.x 引导程序解决方案是：
$('.navbar-collapse a').click(function(){
$(".navbar-collapse").collapse('hide');
});
https://jsfiddle.net/yohuLuj2/
https://jsfiddle.net/yohuLuj2/
Old Answer for 2.x bootstrap:
2.x 引导程序的旧答案：
You should be able to do that by adding a click handler to the list items and then closing the nav that way.
您应该能够通过向列表项添加点击处理程序然后以这种方式关闭导航来做到这一点。
$('.nav-collapse').click('li', function() {
$('.nav-collapse').collapse('hide');
});
Heres a jsfiddle: http://jsfiddle.net/hajpoj/By6ym/4/
这是一个 jsfiddle：http: //jsfiddle.net/hajpoj/By6ym/4/
回答by Zu1779
I just replicate the 2 attributes of the btn-navbar (data-toggle="collapse" data-target=".nav-collapse") on each link like this:
我只是在每个链接上复制 btn-navbar (data-toggle="collapse" data-target=".nav-collapse") 的 2 个属性，如下所示：
<div class="nav-collapse">
<ul class="nav" >
<li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse">Home</a></li>
<li><a href="#about" data-toggle="collapse" data-target=".nav-collapse">About</a></li>
<li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse">Portfolio</a></li>
<li><a href="#services" data-toggle="collapse" data-target=".nav-collapse">Services</a></li>
<li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse">Contact</a></li>
</ul>
</div>
回答by Mike Eberly
Only thing I'd add to jason's solution is the exception for dropdowns. You don't want to close your menu if someone is simply clicking to toggle the submenu. So…
我唯一要添加到 jason 的解决方案中的是下拉列表的例外。如果有人只是单击以切换子菜单，则您不想关闭菜单。所以…
$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
$(".navbar-collapse").collapse('hide');
});
回答by Sarah Wever
@Mike's dropdown solution worked for me except that the items within the dropdown toggle wouldn't hide the menu so I made sure to add this:
@Mike 的下拉解决方案对我有用，只是下拉切换中的项目不会隐藏菜单，所以我确保添加以下内容：
$('.navbar-collapse .dropdown-menu').click(function(){
$(".navbar-collapse").collapse('hide');
});
回答by Sergio
Another problem is when you see the navbar on desktop, it try to hide/show the navbar, so I made this:
另一个问题是当你在桌面上看到导航栏时，它会尝试隐藏/显示导航栏，所以我做了这个：
$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
if($(window).width() < 768 )
$('.navbar-collapse').collapse('hide');
});
回答by Behrang Saeedzadeh
Just remember to traverse up the DOM tree and close the associated Navbar, and not all Navbars. In particular for Bootstrap 3, use something similar to the following code snippet:
请记住向上遍历 DOM 树并关闭关联的导航栏，而不是所有导航栏。特别是对于 Bootstrap 3，使用类似于以下代码片段的内容：
$("body").on("click", ".navbar-collapse a", function() {
var $this = $(this);
setTimeout(function() {
$this.closest(".navbar-collapse").collapse('hide');
}, 350);
});
回答by Camel
I complete the answers by adding button click management:
我通过添加按钮点击管理来完成答案：
$(document).on('click', '.navbar-collapse.collapse.in a:not(.dropdown-toggle)', function() {
$(this).closest(".navbar-collapse").collapse('hide');
});
$(document).on('click', '.navbar-collapse.collapse.in button:not(.navbar-toggle)', function() {
$(this).closest(".navbar-collapse").collapse('hide');
});
回答by Haroon
My problem was, I was creating single page layout with anchors. So, when you downsize the window, menu hide on link click perfectly. Thanks to above user who gave me clue.But, when upsize window, the bind event always there (without reloading, though). So, here what I did. Hope it helps someone :)
我的问题是，我正在创建带有锚点的单页布局。因此，当您缩小窗口大小时，链接上的菜单隐藏点击完美。感谢上面给我线索的用户。但是，当放大窗口时，绑定事件总是存在（尽管没有重新加载）。所以，这是我所做的。希望它可以帮助某人:)
jQuery.noConflict();
(function($){
$('ul#menu-menu-with-anchors li a, a[href="#top"]').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top - ($('body').hasClass('admin-bar') ? 160 : 130)
}, 500);
return false;
});
bindUnbindNavToggle($);
$(window).resize(function(){
bindUnbindNavToggle($);
});
})(jQuery);
function bindUnbindNavToggle($){
if( $('button.navbar-toggle').css('display') != 'none' ) {
$('.navbar-collapse ul li a').on('click', function(){
$('.navbar-collapse').collapse('hide');
return false;
});
}
else {
$('.navbar-collapse ul li a').on('click', function(){
return false;
});
}
}
回答by miz
If you use Angular, you can bind the collapsing to the route navigation:
如果使用 Angular，则可以将折叠绑定到路线导航：
$scope.$on('$routeChangeSuccess', function(event, toState, toParams, fromState, fromParams){ $(".navbar-collapse").collapse('hide'); });
