自动closures响应式导航栏
我正在使用Bootstrap响应式导航栏。 当导航栏被折叠，我打开菜单并点击一个菜单项时，菜单不会自动closures，我必须自己手动完成。
点击其中一个button后是否可以自动closures菜单？
编辑：正如Maximus指出的那样， 3.x bootstrap解决scheme是：
$('.navbar-collapse a').click(function(){ $(".navbar-collapse").collapse('hide'); });
https://jsfiddle.net/yohuLuj2/
2.x bootstrap的旧答案：
您应该可以通过将单击处理程序添加到列表项目然后closures导航。
$('.nav-collapse').click('li', function() { $('.nav-collapse').collapse('hide'); });
下面是一个jsfiddle： http : //jsfiddle.net/hajpoj/By6ym/4/
自举的工作解决scheme3
$('.navbar-collapse a').click(function(){ $(".navbar-collapse").collapse('hide'); });
我只是在每个链接上复制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>
只有我join杰森的解决scheme是下拉的例外。 如果有人只是点击切换子菜单，您不想closures菜单。 所以…
$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){ $(".navbar-collapse").collapse('hide'); });
@迈克的下拉解决scheme为我工作，除了在下拉菜单中的项目不会隐藏菜单，所以我一定要添加这个：
$('.navbar-collapse .dropdown-menu').click(function(){ $(".navbar-collapse").collapse('hide'); });
只要记住遍历DOM树并closures相关的导航栏，而不是所有的导航栏。 特别是对于Bootstrap 3，请使用类似于以下代码段的内容：
$("body").on("click", ".navbar-collapse a", function() { var $this = $(this); setTimeout(function() { $this.closest(".navbar-collapse").collapse('hide'); }, 350); });
另一个问题是，当你看到桌面上的导航栏，它试图隐藏/显示导航栏，所以我做了这个：
$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){ if($(window).width() < 768 ) $('.navbar-collapse').collapse('hide'); });
我通过添加button点击pipe理完成答案：
$(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'); });
我的问题是，我正在用锚点创build单页面布局。 所以，当你缩小窗口，菜单隐藏链接点击完美。 感谢上面的用户谁给了我线索。 但是，当窗口变大时，绑定事件总是在那里（不用重新加载，尽pipe）。 所以，在这里我做了什么。 希望它可以帮助别人:)
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; }); } }
如果您使用Angular，则可以将折叠绑定到路线导航：
$scope.$on('$routeChangeSuccess', function(event, toState, toParams, fromState, fromParams){ $(".navbar-collapse").collapse('hide'); });
简单地把这个代码放在main.js中
$(document).on('click', '.navbar-collapse.in', function (e) { if ($(e.target).is('a')) { $(this).collapse('hide'); } });
也许有人需要隐藏菜单，只要点击到其他地方（我想应该没有子菜单）。 然后在jquery，bootstrap.js之后的某个地方添加这个代码
$('button.navbar-toggle').focusout(function(){ $(".navbar-collapse").collapse('hide'); });
