如何在导航栏元素外部单击时关闭打开的折叠导航栏？目前，打开或关闭它的唯一方法是单击navbar-toggle按钮。
有关示例和代码，请参见此处：
到目前为止，我已经尝试了以下似乎不起作用的方法：
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/
它是这个答案的修改版本，它没有动画，也稍微复杂一点。
我知道，调用click()不是很优雅，但collapse('hide')对我也不起作用，而且我认为动画比几乎添加和删除类要好一些。
接受的答案似乎无法正常工作。它只需要检查“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');
}
});
使用这个对我有用。
$(function() {
$(document).click(function (event) {
$('.navbar-collapse').collapse('hide');
});
});
我决定使用的解决方案取自这里接受的答案和这个答案
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仍然可以关闭菜单。
为 Bootstrap 4(.3.1) 转换了喷枪工的答案：
$(document).ready(function () {
$(document).click(
function (event) {
var target = $(event.target);
var _mobileMenuOpen = $(".navbar-collapse").hasClass("show");
if (_mobileMenuOpen === true && !target.hasClass("navbar-toggler")) {
$("button.navbar-toggler").click();
}
}
);
});
放置在 ngOnInit() 中。
加载文档时，此代码等待单击事件。如果移动菜单下拉菜单是打开的（即导航栏的可折叠部分具有“显示”类）并且单击的对象（目标）不是移动菜单按钮（即没有“导航栏-toggler”类），则我们告诉移动菜单按钮它已被点击，然后菜单关闭。