我有一些HTML菜单，当用户单击这些菜单的头部时，我会完全显示这些菜单。当用户在菜单区域外单击时，我希望隐藏这些元素。
jQuery是否可以实现这样的功能？
$("#menuscontainer").clickOutsideThisElement(function() {
// Hide the menus
});
当前回答
作为Art这个伟大答案的包装，并使用OP最初要求的语法，这里有一个jQuery扩展，它可以记录在集合元素之外是否发生了单击。
$.fn.clickOutsideThisElement = function (callback) {
return this.each(function () {
var self = this;
$(document).click(function (e) {
if (!$(e.target).closest(self).length) {
callback.call(self, e)
}
})
});
};
然后你可以这样打电话：
$("#menuscontainer").clickOutsideThisElement(function() {
// handle menu toggle
});
这是小提琴演示
其他回答
注意：应该避免使用stopPropagation，因为它会破坏DOM中的正常事件流。有关更多信息，请参阅这篇CSS技巧文章。请考虑改用此方法。
将单击事件附加到关闭窗口的文档正文。将一个单独的单击事件附加到容器，以停止传播到文档正文。
$(window).click(function() {
//Hide the menus if visible
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
我很惊讶没有人真正承认这一事件：
var button=document.getElementById（'button'）；button.addEventListener（'click'，函数（e）{e.target.style.backgroundColor=“绿色”；});button.addEventListener（'焦点'，函数（e）{e.target.style.backgroundColor=''；});<!DOCTYPE html><html><head><meta charset=“utf-8”></head><body><button id=“button”>单击</button></body></html>
我已经使用了下面的脚本并完成了jQuery。
jQuery(document).click(function(e) {
var target = e.target; //target div recorded
if (!jQuery(target).is('#tobehide') ) {
jQuery(this).fadeOut(); //if the click element is not the above id will hide
}
})
下面是HTML代码
<div class="main-container">
<div> Hello I am the title</div>
<div class="tobehide">I will hide when you click outside of me</div>
</div>
你可以在这里阅读教程
我知道这个问题有一百万个答案，但我一直喜欢使用HTML和CSS来完成大部分工作。在这种情况下，z索引和定位。我找到的最简单的方法如下：
$（“#show trigger”）.click（function（）{$（“#element”）.animate（｛width:'toggle'｝）；$（“#外部元素”）.show（）；});$（“#外部元素”）.click（function（）{$（“#element”）.hide（）；$（“#外部元素”）.hide（）；});#外部元件{位置：固定；宽度：100%；高度：100%；z指数：1；显示：无；}#元素{显示：无；填充：20px；背景色：#ccc；宽度：300px；z指数：2；位置：相对；}#显示触发器{填充：20px；背景色：#ccc；边距：20px自动；z指数：2；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div id=“outside element”></div><div id=“element”><div class=“menu item”><a href=“#1”>菜单项1</a></div><div class=“menu item”><a href=“#2”>菜单项1</a></div><div class=“menu item”><a href=“#3”>菜单项1</a></div><div class=“menu item”><a href=“#4”>菜单项1</a></div></div><div id=“show trigger”>显示菜单</div>
这创建了一个安全的环境，因为除非菜单实际打开，否则不会触发任何内容，并且z索引保护元素中的任何内容在被单击时不会产生任何错误。
此外，您不需要jQuery用传播调用覆盖所有基础，也不需要清除所有内部元素中的错误。
$（'html'）.click（function（）{//隐藏菜单（如果可见）});$（'#menucontainer'）.click（函数（事件）{event.stopPropagation（）；});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><html><button id=“#menucontainer”>确定</button></html>
