JQueryトグル.css

Question

このjqueryコードは正常に動作しています。

$(window).load(function() { 

    $('.menuBtn').click(function(e) { 
     e.preventDefault(); 
     (this.classList.contains('is-active') === true) ? this.classList.remove('is-active'): this.classList.add('is-active'); 
     $('nav').slideToggle(); 

     $('.headerBarm').toggleClass('fixed-position'); 
     $('nav').toggleClass('fixed-position'); 
     $('.headerBar').toggleClass('fixed-position'); 


     $('body').css({ 
      'height': '100%', 
      'overflow': 'hidden' 
     }); 

    }); 

}); 

最近私は最後の行を追加しました。

$('body').css({ 
       'height': '100%', 
       'overflow': 'hidden' 
      }); 

ボタンをクリックすると、上記のCSSが追加されます。

私の問題は、もう一度クリックすると元に戻りません。これはトグルで動作しますか？

Answer 1

あなたは、クラスとtoggleClass()のストリークを続けませんか？

CSS：

body.full { 
    height: 100%; 
    overflow: hidden; 
} 

JS（その最後の行を置き換え）：

$("body").toggleClass("full"); 

Answer 2

カスタムクラスを作成して切り替えます。

.myclass { 
    height: 100%; 
    overflow: hidden; 
} 



$('body').toggleClass('myclass');