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

Question

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

Java脚本

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了……那么在这种情况下，您将颠倒逻辑

$('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()