jquery - jQuery - クリックされた要素以外のすべての要素を非表示にします

Question

.flyout という jQuery のフェードインおよびフェードアウト ボックスがあります。クリックするとフェードアウトします。また、別のものをクリックするとフェードアウトしたいです。すべての .flyout クラスを非表示にしようとしましたが、現在アクティブな .flyout をクリックするとすぐにフェードインおよびフェードアウトします。私はjQuery not、parent、siblingsなどをいじってみましたが、うまくいきません。

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