Warum kann meine Taste Überlauf-y nicht deaktivieren: versteckt?

Question

Ich versuche zu erreichen, dass meine Taste reagiert wird. In genauen, auf den ersten Klick wenn Menü öffnet es verdunkelt den gesamten Bildschirm und markieren Sie das Menü, sowie overflow-y:hidden beginnt zu arbeiten, da mein Ziel ist, um sicherzustellen, wenn Menü öffnet, wird es keine Bildlauf haben. Dort, wenn das Hauptproblem auftritt, findet ein Überlauf versteckt statt und ich kann nicht abschalten, wenn ich erneut auf die Menütaste klicke. Wie erreicht man das?

meinem vorherigen jquery:

$("#button").click(function(){ 
     $('.slide').fadeToggle(500); 
     $('.darklayer').toggleClass('active'); 
     $('body').css({'overflow-y': 'hidden'}); 
}); 

hier ist mein neues jquery:

$("#button").click(function(){ 
     var $dark = $('.darklayer'); 
     $('.slide').fadeToggle(500); 
     ($dark).toggleClass('active'); 
      if($dark.is(':active')) { 
       $('body').css({'overflow-y': 'hidden'}); 
      } 
      else { 
       $('body').off('click'); 
      } 
    }}); 

Mein HTML:

<div class="darklayer"></div> 
    <header id="main_menu"> 
      <div id="menu"> 
       <ul class="slide"> 
        <li><a href="#">Поиск строения</a></li> 
        <li><a href="#">Оплатить ком услуги</a></li> 
        <li><a href=#>Обратиться за помощью</a></li> 
        <li><a href=#>Управляющая компания</a></li> 
        <li><a href="second_page.html">Обратиться в Акимат</a></li> 
        <li><a href=#>Объявления</a></li> 
        <li><a href="page.html">Информация о строении</a></li> 
        <li><a href=#>Обсуждения</a></li> 
        <li><a href=#>Помощь</a></li> 
       </ul> 
      </div> 
      <section id="main_header"> 
       <div class="left_header"> 
        <a href="index.html"><img src="svg/logo.svg" alt="logo" style="height: 16px; padding-left: 15px;"></a> 
        <p class="text_ru">ru</p> 
       </div> 
       <div class="right_header"> 
        <img class="btn search" src="svg/search.svg" alt="search" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer; "> 
        <img class="btn" src="svg/pro.svg" alt="pro" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;"> 
        <img id="button" class="btn" src="svg/sandwich.svg" alt="sandwich" style="height: 18px; padding-left: 15px; padding-right: 30px; cursor: pointer;"> 
       </div> 
      </section> 
     </header> 

Answer 1

try this: user hasClass wie unten

gezeigt

$("#button").click(function(){ 
     var $dark = $('.darklayer'); 
     $('.slide').fadeToggle(500); 
     $dark.toggleClass('active'); 
      if($dark.hasClass('active')) { 
       $('body').css({'overflow-y': 'hidden'}); 
      } 
      else { 
       $('body').off('click'); 
      } 
    }}); 

Answer 2

Ich denke, Ihr Problem in der if-Anweisung Sie

if($dark.hasClass('active')) 

statt

if($dark.is(':active')) 

Answer 3

Können Sie versuchen, diese nicht verwenden kann?

 if($dark.is(':active')) { 
      $('body').css({'overflow-y': 'hidden'}); 
     } 
     else { 
      $('body').css({'overflow-y': 'visible'}); 
     }