Question

我尝试编写一段代码，以在有人打开菜单（其中是全屏菜单）时在overflow: hidden上设置body标签。当用户单击关闭时，还应将其设置回auto。我的问题是，将其设置为隐藏，但是在关闭菜单时不要将其重置为自动。我在做什么错了？

JavaScript

function() {
  $('.menu-button').click(function(e) {
    e.preventDefault();
    $('body').css('overflow', 'hidden');
  });

  $('.menu-button').click(function(e) {
    e.preventDefault();
    $('body').css('overflow', 'auto');
  });
});

HTML

<div class="menu-button w-nav-button">
    <a href="#" class="menu-icon w-inline-block w-clearfix">
        <div class="menu-icon__line left"></div>
        <div class="menu-icon__line"></div>
        <div class="menu-icon__line right"></div>
    </a>
</div>

Answer 1

您只需要一个单击处理程序即可切换溢出属性

如下

(function() {
  $('.menu-button').click(function(e) {
    e.preventDefault();
    $('body').css('overflow', $('body').css('overflow') == 'hidden' ? 'auto' : 'hidden');
  });
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="menu-button w-nav-button">
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>

    $('body').css('overflow', $('body').css('overflow') == 'hidden' ? 'auto' : 'hidden');

也可以写

    $('body').css('overflow', $('body').css('overflow') == '' ? 'hidden' : '');

因为“自动”是溢出的“默认”值

但是，根据溢出的初始状态，可能无法完全正确地工作……即，如果样式表的初始状态为hidden……那么，在这种情况下，您需要反转逻辑< / p>

$('body').css('overflow', $('body').css('overflow') == '' ? 'auto' : '');

Answer 2

JS

$('button').click(function(e) {
    $('body').toggleClass('overflow-hidden');
});

CSS

.overflow-hidden {overflow: hidden}

将.css()替换为.toggleClass()

通过单击菜单将溢出设置为隐藏在身体上

2 个答案: