通过单击按钮显示一个元素并通过点击隐藏其他地方

Question

只有假设<div id="hidden"></div>可见，我需要设置全局点击操作。

设置全局功能很简单：

$(document).click(function(e) { 
    $("#hidden").fadeOut(700); 
}); 

但我也有：

$("#hidden").hide(); 
$("#button").click(function(e) { 
    $("#hidden").fadeIn(700); 
}); 

而这两个不一起工作造成第一次点击它会fadeIn也fadeOut的#hidden我试过用：

$("#button").click(function(){ 
     $("#hidden").fadeIn(500); 
    }); 

    if($("#hidden").is(":visible")) { 
    $(document).click(function(e) { 
     $("#hidden").fadeOut(700); 
    }); 
} 
else { 
} 

...但是没有用......

jsFiddle

Answer 1

可以在全局函数检查event.target：

$(document).click(function(e) { 
 
    if (e.target.id == "button") $("#hidden").fadeIn(500); 
 
    else $("#hidden").fadeOut(700); 
 
});

#hidden { 
 
    display: none; 
 
    height: 50px; 
 
    background: hotpink; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hidden"></div> 
 
<button id="button">Show</button>