jquery - divをクリックしたときにクラスを追加する

Question

divをクリックすると展開/折りたたまれるナビゲーションメニューを備えたサイドバーを作成しようとしています。

$(document).ready(function() {     
$('.btn-nav').click(function(){     
    $('.sidebar').addClass('expand');    
},     
function(){    
    $('.sidebar').removeClass('collapse');     
});
}); 

クリック機能をホバー機能に置き換えると、正常に機能します。しかし、今はうまくいきません。誰かが私が間違っていることを知っていますか?

Answer 1

これを行う必要があります：

$(document).ready(function () {
    $('.btn-nav').click(function () {
        $('.sidebar').toggleClass('expand').toggleClass('collapse');
    });
});

click() API ドキュメントを見ると、1 つの関数しか使用しないことがわかりますが、hover()は 1 つまたは 2 つのハンドラー関数を使用し、マウス ポインターが要素に出入りするときに実行されます。

Answer 2

クリック イベントにはパラメーターがありません。以下のコードを使用できます。

$(document).ready(function() {
    var testMethod = function(event){
        if(event.data.flg == 0){
             $('.sidebar').addClass('expand');
             event.data.flg=1;
        }
        else {
            $('.sidebar').removeClass('collapse'); 
            event.data.flg=0;
        }
    };


    $('.btn-nav').on('click', {flg: 0}, testMethod);
});