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

Question

我尝试编写一段代码，当有人打开菜单(这是一个全屏菜单)时，将 body 标记设置为 overflow:hidden 。当用户单击关闭时，它还应该将其设置回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' : '');

因为“auto”是溢出的“默认”值

但是，根据溢出的初始状态，这可能无法完全正确地工作......即，如果初始状态被样式表隐藏......所以在这种情况下你会反转逻辑

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