Wie man Überlauf-y: versteckt; Arbeit am Klick mit jquery?

Question

Mein Ziel ist es, sicherzustellen, dass bei Klick mein Menü geöffnet wird und für body CSS-Option hinzugefügt wird, die Überlauf-y: hidden` ist, um die Aufmerksamkeit der Benutzer nur auf das Menü zu lenken. Wenn also der Benutzer auf die Menüschaltfläche klickt, wird es angezeigt, und diese Bildlaufleiste wird den Benutzer nicht stören. Wenn das Menü jedoch geschlossen wird, sollte die Bildlauffunktion natürlich funktionieren. Wie erreiche ich das?

$(document).ready(function() { 
 
    $("#button").click(function() { 
 
     $('.slide').fadeToggle(500); 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $("#button").click(function() { 
 
     console.log('click'); 
 
     $('.darklayer').toggleClass('active'); 
 
    }); 
 
}); 
 

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

#main_header { 
 
    opacity: 1; 
 
    width: 100%; 
 
    height: 50px; 
 
    background: #f0f0f0; 
 
    position: relative; 
 
    width: 100%; 
 
    z-index: 2; 
 
} 
 

 
#main_header .text_ru { 
 
    font-size: 15px; 
 
    color: rgb(12, 89, 163); 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    width: 18px; 
 
    height: 11px; 
 
    display: inline-block; 
 
    font-weight: 500; 
 
    margin-left: 20px; 
 
} 
 

 
p.text_ru { 
 
    line-height: 1.929; 
 
} 
 

 
#main_header .left_header { 
 
    float: left; 
 
} 
 

 
#main_header .right_header { 
 
    float: right; 
 
    padding: 15px 15px; 
 
} 
 

 
.darklayer { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #000; 
 
    opacity: 0.35; 
 
    position: fixed; 
 
    z-index: 1; 
 
    display: none; 
 
} 
 

 
.darklayer.active { 
 
    display: block; 
 
    overflow: hidden; 
 
    max-width: 768px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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

können Sie es verwenden,

$(document).ready(function() { 
    $('button').on('click', function() { 
    $('body').css('overflow-y', 'hidden'); 
    }); 
});