在引导程序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事件。 点击一个图像不会触发事件。
