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

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：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;