hide div如果点击它之外

Question

我对这个JQuery函数有点麻烦。

基本上，我有一个div，点击时显示另一个div。它实际上设置为切换，因此当您点击时它会打开/关闭。

我想要它在哪里，如果你点击打开的div以外的任何地方（单击第一个div后出现），打开的div将关闭。

$("#idSelect").click(function() { 
    $("#idDiv").toggle(); 
}); 

Answer 1

编辑：更好的方法在这里：
How to create a custom modal popup - and how to close it clicking outside of it

---

jsBin demo

$("#idSelect").click(function(e) { 
    e.stopPropagation(); 
    $("#idDiv").toggle(); 
}); 

$("#idDiv").on('click',function(e) { 
    e.stopPropagation(); 
}); 

$(document).on('click', function(e) { 
    if(e.target.id != 'idDiv'){ 
     $("#idDiv").hide(); 
    } 
}); 

Answer 2

希望这有助于：

$(document).click(function() { 
    if($(window.event.target).attr('id') != 'idSelect') 
     $("#idDiv").hide(); 
}); 

Answer 3

$(document).on("click",function(e) { 
    if ($(e.target).is("#idDiv, #idDiv *")) 
     $("#idDiv").show(); 
    else 
     $("#idDiv").hide(); 
}); 

Answer 4

jQuery-outside-events插件增加了对以下事件

clickoutside，dblclickoutside，focusoutside，bluroutside， mousemoveoutside为mouseDownOutside，mouseupoutside，mouseoveroutside， mouseoutoutside，keydownoutside，keypressoutside，keyupoutside， 支持更换外部，选择外部，提交外部。

适用于你的情况，你可以做

$("#idDiv").on("clickoutside", function() { 
     $("#idDiv").hide(); 
    }); 

    $("#idSelect").on("click", function(e) { 
     $("#idDiv").toggle(); 
     e.stopPropagation(); 
    }); 

演示here