Javascript 如何通过使用jquery单击同一元素来启用和禁用滚动？

我想在单击页面的“菜单图标”时禁用滚动，然后在再次单击菜单关闭时再次启用滚动

我正在尝试这样的事情：

$(document).ready(function(){

  $(".menu").click(function (e) {
    $(".menucontent").show();
    if ( $(".menucontent").is(":visible")) {
      $('html, body').css({ overflow: 'hidden', height: '100%'});
    }else{
      $('html, body').css({ overflow: 'auto', height: 'auto'});      
    }

  });
  });

但我需要一些帮助，因为我是这门语言的新手

你应该用切换键而不是显示

切换：显示或隐藏匹配的元素

---

检查它是如何失败的？控制台中是否出现错误？当菜单内容可见时，它实际上会禁用滚动条，但当我再次单击菜单按钮时，滚动条不起作用，滚动条将再次启用，但不会产生结果。如果您提供的滚动条不符合您的要求，则会按预期工作，试着用另一种方式描述你的最终目标。也许我没有很好地解释自己。。。我想做的是，在做任何事情之后，页面的滚动像往常一样工作，但是当我点击菜单按钮时，菜单的内容会显示出来，滚动会被淡化，所以我不能移动任何东西，直到我关闭菜单，然后内容被隐藏，滚动会回到初始状态，wich的意思是再次启用。你们还没明白。问题不在于我如何显示或不显示内容，问题在于滚动。。。我希望在显示内容之前启用页面滚动，并在可见时禁用。

$(document).ready(function(){
  $(".menu").click(function (e) {
    $(".menucontent").toggle();
      if ( $(".menucontent").is(":visible")) {
        $('html, body').css({ overflow: 'hidden', height: '100%'});
      }else{
        $('html, body').css({ overflow: 'auto', height: 'auto'});      
      }
    });
  });