Question

我正在尝试实现我的按钮会响应。准确地说，当菜单打开时第一次点击它会使整个屏幕变暗并突出显示菜单，以及overflow-y: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');
            }
    }});

Answer 2

我认为你在if语句中的问题可以使用

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

而不是

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

Answer 3

你能试试吗？

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

为什么我的按钮无法禁用overflow-y：hidden？

3 个答案: