JQueryがアクティブクラスを削除していない

Question

モバイルナビをクリックしてコンテンツが消えてリンクが表示されるだけで、リンクがページ上をスライドするようにしようとしています。私はこれを基本的に動作させていますが、mobilenavを再びクリックすると.displayNoneクラスは削除されません。なぜか、私はちょっと頭がおかしくなります。

$(document).ready(function() { 
    $('#hamburger').on('click', function(){ 
     $('.links').slideToggle(200); 
     var status = $('.wrapper').hasClass('.displayNone'); 
     if(status){ $('.wrapper').removeClass('.displayNone'); } 
     else { $('.wrapper').addClass('displayNone'); } 
    }); 

    }); 

これまでの初心者のビット。誰もがこれで間違って見ることができることは明らかですか？

Answer 1

使用toggleClass()、

$('.wrapper').toggleClass('displayNone'); 

そして、jQueryのxxxClass()機能は、クラスの名前ではなく、セレクタを期待し、その.クラスセレクタをオフにしておきます。

Answer 2

クラスを追加/削除するときは、displayNone（.displayNoneではなく！）を使用してください。

はまた、あなたは自分が

var status = $('.wrapper').hasClass('.displayNone'); 

あなたがhasClass, addClass or removeClassを使用し、間違ったビットをやっている

$('.wrapper').toggleClass('displayNone'); 

Answer 3

を行う必要があることを意味statusことを、やってからあなたを節約toggleClass()機能がありますあなた'持っている必要はありません。'クラス名の前にドットを付けます。

ので、正しい方法で補正を使用でき

$(document).ready(function() { 
    $('#hamburger').on('click', function() { 
    $('.links').slideToggle(200); 
    var status = $('.wrapper').hasClass('displayNone'); 
    if (status) { 
     $('.wrapper').removeClass('displayNone'); 
    } else { 
     $('.wrapper').addClass('displayNone'); 
    } 
    }); 
}); 

Answer 4

後

var status = $('.wrapper').hasClass('displayNone'); 

あなたのコードです：

$('.wrapper').toggleClass("displayNone"); 

決勝コード：

$(document).ready(function(){ 

    $('#hamburger').on('click', function(){ 

     $('.links').slideToggle(200); 

     $('.wrapper').toggleClass("displayNone"); 

    }) 

})