Javascript 通过单击菜单将溢出设置为隐藏在正文上

我试图写一段代码，当有人打开菜单（这是一个全屏菜单）时，将body标记设置为

overflow:hidden

。当用户单击“关闭”时，还应将其设置回“自动”。我的问题是，当菜单关闭时，它将其设置为隐藏，但不要将其重置为自动。我做错了什么

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

---

您只需要一个单击处理程序，用于切换溢出属性

如下

（函数（）{
$（“.菜单按钮”）。单击（函数（e）{
e、 预防默认值（）；
$（'body'）.css（'overflow'，$（'body'）.css（'overflow'）=='hidden'？'auto'：'hidden'）；
});
})();

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
您只需要一个单击处理程序，用于切换溢出属性

如下


（函数（）{
$（“.菜单按钮”）。单击（函数（e）{
e、 预防默认值（）；
$（'body'）.css（'overflow'，$（'body'）.css（'overflow'）=='hidden'？'auto'：'hidden'）；
});
})();

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
JS

CSS

将
.css（）
替换为
.toggleClass（）
JS

CSS

将
.css（）
替换为
.toggleClass（）
请以JSFIDLE或代码片段的形式将其替换。事件处理程序如何“知道”您想要哪一个？他们都会被触发time@A.Meshu-这对css溢出属性有什么帮助？@JaromandaX它没有-但它可能会导致OP在构建函数时在两种模式之间切换。虽然你的答案更好（：请以JSFIDLE或代码片段的形式来表达。事件处理程序是如何“知道”的你想要哪一个？他们都会被触发time@A.Meshu-这对css溢出属性有什么帮助？@JaromandaX它没有-但它可能会导致OP在构建函数时在两种模式之间切换。尽管您的答案更好（：
<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>

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

.overflow-hidden {overflow: hidden}