通過單擊按鈕顯示一個元素並通過點擊隱藏其他地方

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>