jquery - jQuery-toggle＆removeClass

Question

簡単なものですが、わかりません。#titleというリンクがあり、クリックすると#contentというdivが切り替わります。これは完全に機能しますが、それに加えて、＃titleリンクに「アクティブ」クラスを追加しているため、removeClassを使用しても削除できません。

上記のコードとリンク例を参照してください（タイトルは、常にではなく、＃contentが展開されている場合にのみ赤で表示されます）。

$('#title').click(function() {
    $(this).addClass('active');
    $('#content').toggle();
}), function() { 
    $(this).removeClass('active');
};

http://jsfiddle.net/vY3WY/

score 24 · Accepted Answer

トグルと一緒にtoggleClass関数を使用できます。

http://jsfiddle.net/vY3WY/1/

$('#title').click(function() {
    $(this).toggleClass('active');
    $('#content').toggle();
});

または、コンテンツが表示されている場合はクラスが追加され、そうでない場合は削除される、より堅牢なバージョンを使用できます。

http://jsfiddle.net/vY3WY/6/

$('#title').click(function() {
    $('#content').toggle();
    if ($('#content:visible').size() != 0)
    {
         $(this).addClass('active');   
    }
    else
    {
         $(this).removeClass('active');   
    }
});

score 7 · Accepted Answer

このバージョンは動作します。

$('#title').click(function() {
    if($(this).hasClass('active')) {
        $(this).removeClass('active');
    } else {
        $(this).addClass('active');
    }
    $('#content').toggle();
});

を使用して「アクティブ」の存在を確認し、存在hasClassする場合は削除します。そうでない場合は追加します。

toggleClassまたは、そのすべてのロジックを非表示にするために使用できます。

score 5 · Accepted Answer

コンパクトでまだ読みやすい（私は推測する）ソリューション：

$('#title').click(function() {
    var isContentVisible=$('#content').toggle().is(':visible');
    $(this).toggleClass('active', isContentVisible);
});

ライブデモ

切り替え#contentて、後で表示されるかどうかを確認します。#title次に、結果に基づいてクラスを切り替えます。ワンライナー関数でもかまいませんが、そのときの読みやすさの期待には応えられません。

score 0 · Accepted Answer

現在の値を他の値で非表示にするためのもう1つのソリューション

$('.my').click(function() {
if($(this).hasClass('active')) {
    $(this).removeClass('active');
} else {
    $(this).addClass('active');
}
$('.my').toggle();

}）;

ここをクリック！_ これは、参照リンクでも機能します。

score 0 · Accepted Answer

これが最も適切な方法だと思います。

$(this).toggleClass('active').siblings().removeClass('active');

jquery - jQuery-toggle＆removeClass

5 に答える 5

Related

Reference