通过单击按钮来显示元素，并通过单击其他任何位置来隐藏

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>