在引导程序3中单击导航栏元素外部时如何closures打开的折叠导航栏?

如何在点击导航栏元素外部时closures打开的折叠导航栏? 目前,打开或closures它的唯一方法是单击navbar-togglebutton。

看到这里的例子和代码:

到目前为止,我已经尝试了以下似乎不起作用:

 jQuery(document).click(function() { }); jQuery('.navbar').click(function(event) { jQuery(".navbar-collapse").collapse('hide'); event.stopPropagation(); }); 

看看:

 $(document).ready(function () { $(document).click(function (event) { var clickover = $(event.target); var _opened = $(".navbar-collapse").hasClass("navbar-collapse in"); if (_opened === true && !clickover.hasClass("navbar-toggle")) { $("button.navbar-toggle").click(); } }); }); 

你的小提琴适用于: http : //jsfiddle.net/52VtD/5718/

它是这个答案的修改版本,缺乏animation,也稍微复杂一点。

我知道,调用click()并不是很优雅,但是collapse('hide')也不适用于我,我认为animation比添加和删除类更好一些。

接受的答案似乎不能正常工作。 只需要检查“navbar-collapse”是否有“in”类。 然后,我们可以按照预期的方式使用我们对导航栏的引用来触发崩溃方法。

 $(document).click(function (event) { var clickover = $(event.target); var $navbar = $(".navbar-collapse"); var _opened = $navbar.hasClass("in"); if (_opened === true && !clickover.hasClass("navbar-toggle")) { $navbar.collapse('hide'); } }); 

我决定使用的解决scheme是从这里接受的答案中,从这个答案

 jQuery('body').bind('click', function(e) { if(jQuery(e.target).closest('.navbar').length == 0) { // click happened outside of .navbar, so hide var opened = jQuery('.navbar-collapse').hasClass('collapse in'); if ( opened === true ) { jQuery('.navbar-collapse').collapse('hide'); } } }); 

如果用户点击.navbar元素以外的任何地方,将隐藏打开的折叠导航菜单。 当然,点击.navbar-toggle仍然可以closures菜单。

使用这个对我有用。

 $(function() { $(document).click(function (event) { $('.navbar-collapse').collapse('hide'); }); }); 

stopPropagation()并不总是最好的解决scheme。 而是使用像这样的东西:

 jQuery(document.body).on('click', function(ev){ if(jQuery(ev.target).closest('.navbar-collapse').length) return; // Not return false // Hide navbar }); 

我认为假设你从来不想听从.navbar任何其他事件是.navbar 。 如果使用stopPropagation()这是不可能的。

我已经添加了一个条件@喷嘴的答案,检查是否点击或点击已经在菜单中的任何元素,如果是这样的情况,而不是折叠它。

 $(document).ready(function () { $(document).click(function (event) { var clickover = $(event.target); var _opened = $(".navbar-collapse").hasClass("navbar-collapse in"); if (_opened === true && !clickover.hasClass("navbar-toggle") && clickover.parents('.navbar-collapse').length == 0) { $("button.navbar-toggle").click(); } }); }); 

对于Bootstrap 4

Bootstrap 4 in课堂上没有。 这是Coffeescript。

  $(document).click (e)-> #console.log e.target unless $('#toggle-button').has(e.target).length || $('#toggle-menu').has(e.target).length $('#toggle-menu').collapse('hide') 

所以基本上,除非你点击button或菜单,closures菜单。

注意:奇怪的是,在iOS上点击文字不会注册一个点击事件,也不会有一个mouseup事件。 点击一个图像不会触发事件。