如何通过单击与jQuery相同的元素来启用和禁用滚动？

Question

I would like to disable the scroll when the 'Menu icon' of my page is clicked, and then enable the scroll again when the menu is clicked again to close.

I'm trying something like this:

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

  });
  });

but I need some help because I'm kind of newbie on this language

Answer 1

you should put toggle() instead of show

toggle : Display or hide the matched elements.

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