javascript - 为什么我的按钮不能禁用 overflow-y :hidden?

Question

我正在努力实现我的按钮是响应式的。准确地说，当菜单打开时第一次点击它会使整个屏幕变暗并突出显示菜单，并且 overflow-y:hidden 开始工作，因为我的目标是确保菜单打开时它不会有任何卷轴。当主要问题开始出现时， overflow hidden 发生，当我再次单击菜单按钮时我无法关闭。如何实现？

我以前的jquery:

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

这是我的新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');
            }
    }});

我的 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

试试这个:用户 hasClass 如下所示

$("#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');
            }
    }});