jquery - jquery の「.on」を使用して、クラスをターゲット、追加、および削除する

Question

jQuery に関する非常に単純な質問だと思われるかもしれません。（私はこれに非常に慣れていません。）

たくさんの で構成されたメニューがあり、<h2>クリックすると各メニュー項目が片側に移動し、別のメニュー項目がクリックされると元の位置に戻ります。jQueryの「animate」でこれをやっています。「.active」クラスを追加し、jQuery セレクターで .not('.active') を使用してこれを実行できると考えたので、ユーザーがメニュー項目を繰り返しクリックしても、画面上を移動し続けることはありません。しかし、それは正しく機能していません。これは、を使用するときにクラスの変更が考慮されていないためだと思います$(document).ready。.onそのため、代わりに使用しようとしていますが、用語に悩まされています。一緒に使いたかった.not,しかし、私はこのサイトで、それはできないと読みました。だから私は物事を切り替えて、「.*in*active」クラスを作成しようとしましたが、それも私にとってはうまくいきません。

元$(document).readyのコード:

$(document).ready(function() {
    $('.menu-item').not('.active').click(function() {
        $(this).siblings('.active').animate({left: '-=120px'}, '1000');
        $(this).siblings('.active').removeClass('active'); 
        $(this).animate({left: '+=120px'}, '1000');
        $(this).addClass('active');
    });
});

使用しようとする.not:

$('.menu-item .inactive').on('click', function(event) {
        $(this).siblings.not('.inactive').animate({left: '-=120px'}, '1000');
        $(this).siblings.not('.inactive').addClass('inactive'); 
        $(this).animate({left: '+=120px'}, '1000');
        $(this).removeClass('inactive');
});

.notバージョンが機能しない理由、または (可能であれば) を使用するだけでこのことを機能させる方法についてのアイデアはあり$(document).readyますか?