通过点击外部jQuery下拉菜单关闭
我正在开发一个简单的下拉菜单与jQuery。 当用户按下触发区域时，它将切换下拉区域。 我的问题是如何在下拉菜单外单击一个事件，以便关闭下拉菜单？
你可以告诉任何点击，从DOM到整个DOM的隐藏下拉菜单，以及任何点击，使其到下拉菜单的父母停止冒泡。
/* Anything that gets to the document
will hide the dropdown */
$(document).click(function(){
$("#dropdown").hide();
});
/* Clicks within the dropdown won't make
it past the dropdown itself */
$("#dropdown").click(function(e){
e.stopPropagation();
});
演示：http://jsbin.com/umubad/2/edit
如何在下拉菜单之外进行点击事件，以便关闭下拉菜单？ 继承人的代码
$(document).click(function (e) {
e.stopPropagation();
var container = $(".dropDown");
//check if the clicked area is dropDown or not
if (container.has(e.target).length === 0) {
$('.subMenu').hide();
}
})
您需要将您的点击事件附加到某个元素。 如果页面上有很多其他元素，则不希望将点击事件附加到所有元素上。
一种可能的方法是在下拉菜单下面创建一个透明的div，但在页面上的所有其他元素之上。 当显示下拉菜单时，您会显示它。 让元素具有隐藏下拉菜单和透明div的单击手柄。
$('#clickCatcher').click(function () {
$('#dropContainer').hide();
$(this).hide();
});#dropContainer { z-index: 101; ... }
#clickCatcher { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropDown"></div>
<div id="clickCatcher"></div>