我有一些HTML菜单，当用户单击这些菜单的头部时，我会完全显示这些菜单。当用户在菜单区域外单击时，我希望隐藏这些元素。
jQuery是否可以实现这样的功能？
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
当前回答
这对我有用
$("body").mouseup(function(e) {
var subject = $(".main-menu");
if(e.target.id != subject.attr('id') && !subject.has(e.target).length) {
$('.sub-menu').hide();
}
});
其他回答
这是一个经典的例子，对HTML进行调整将是更好的解决方案。为什么不在不包含菜单项的元素上设置单击？那么您不需要添加传播。
$('.header, .footer, .main-content').click(function() {
//Hide the menus if visible
});
我们实现了一个解决方案，部分基于上面用户的评论，这非常适合我们。我们使用它来隐藏搜索框/结果，当在这些元素之外单击时，不包括最初的元素。
// HIDE SEARCH BOX IF CLICKING OUTSIDE
$(document).click(function(event){
// IF NOT CLICKING THE SEARCH BOX OR ITS CONTENTS OR SEARCH ICON
if ($("#search-holder").is(":visible") && !$(event.target).is("#search-holder *, #search")) {
$("#search-holder").fadeOut('fast');
$("#search").removeClass('active');
}
});
它首先检查搜索框是否已经可见，在我们的例子中，它还删除了隐藏/显示搜索按钮上的活动类。
我在一些jQuery日历插件中找到了这个方法。
function ClickOutsideCheck(e)
{
var el = e.target;
var popup = $('.popup:visible')[0];
if (popup==undefined)
return true;
while (true){
if (el == popup ) {
return true;
} else if (el == document) {
$(".popup").hide();
return false;
} else {
el = $(el).parent()[0];
}
}
};
$(document).bind('mousedown.popup', ClickOutsideCheck);
这里的其他解决方案不适合我，所以我不得不使用：
if(!$(event.target).is('#foo'))
{
// hide menu
}
编辑：普通Javascript变体（2021-03-31）
我使用这个方法来处理在单击下拉菜单外部时关闭下拉菜单的问题。
首先，我为组件的所有元素创建了一个自定义类名。这个类名将被添加到组成菜单小部件的所有元素中。
const className = `dropdown-${Date.now()}-${Math.random() * 100}`;
我创建了一个函数来检查单击和单击元素的类名。如果clicked元素不包含我上面生成的自定义类名，它应该将show标志设置为false，菜单将关闭。
const onClickOutside = (e) => {
if (!e.target.className.includes(className)) {
show = false;
}
};
然后，我将单击处理程序附加到窗口对象。
// add when widget loads
window.addEventListener("click", onClickOutside);
……最后还有一些家政服务
// remove listener when destroying the widget
window.removeEventListener("click", onClickOutside);
我有一个应用程序，它的工作方式与Eran的示例类似，只是当我打开菜单时，我会将单击事件附加到主体。。。有点像这样：
$('#menucontainer').click(function(event) {
$('html').one('click',function() {
// Hide the menus
});
event.stopPropagation();
});
有关jQuery的one（）函数的更多信息
