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