jQuery - 隱藏除被點擊元素之外的所有元素

Question

我有一個名爲.flyout的jQuery淡入淡出框。當你點擊它時，我淡出它。如果點擊另一個，我也希望它淡出。我試着隱藏所有.flyout類，但是這會導致當前活動的.flyout在你點擊它時快速淡入淡出。我玩過的jQuery不是，父母，兄弟姐妹等，不能讓它工作。

//hide flyout 
$("body").on("click", function() { 
    $(".flyout").fadeOut(150); 
}); 
//show flyout 
$(".rate").on("click", function(event) { 
    event.stopPropagation(); 
    $(".flyout", this).fadeIn(150); 
}); 

Answer 1

這裏是demo。我確實改變了一下你的代碼。這是按照.flyout元素進行的，因此您必須單獨單擊每個元素。你會看到我在「活動」彈出框中添加了一個.active類。希望這可以幫助！

$('.flyout').on("click", function() { 
    if(!$(this).hasClass('active')) { 
     $(this).fadeOut(150); 
    } else { 
     $(this).fadeOut(150); 
     $(this).fadeIn(150); 
    } 
});