jquery - jQuery - 隐藏除单击元素之外的所有元素

Question

我有一个名为.flyout 的jQuery 淡入淡出框。当您单击它时，我将其淡出。如果单击另一个，我也希望它淡出。我尝试隐藏所有 .flyout 类，但这会导致当前活动的 .flyout 在您单击它时快速淡入和淡出。我玩过 jQuery not，父母，兄弟姐妹等，但无法让它工作。

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

Answer 1

这是一个演示。我确实稍微更改了您的代码。这是.flyout针对每个元素执行的，因此您必须单独单击每个元素。你会看到我.active在“活动”弹出窗口中添加了一个类。希望这可以帮助！

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