javascript - 如果在外部单击，则隐藏 div

Question

我在使用这个 JQuery 函数时遇到了一些问题。

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

我想要它，如果您单击打开的 div 之外的任何位置（单击第一个 div 后出现），则打开的 div 将关闭。

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

Answer 1

编辑：这里有一个更好的方法：
如何创建自定义模式弹出窗口 - 以及如何在外部单击关闭它

---

jsBin 演示

$( "#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，changeoutside，selectoutside，submitoutside。

应用于您的案例，您可以做到

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

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

演示在这里