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); 
    } 
});