jQuery切换无法调整大小

Question

When I resize the window, the toggle part is not working, I had to refresh the page again(keeping the window in the resized state) and it works fine.

bodyClass() part is working fine, just not the menu() part.

Please help :)

    jQuery(document).ready(function() {

    function menu(){

        var memberAreaWidth = jQuery(window).width();
        if( memberAreaWidth <= 900 ){

            jQuery('.memebers-menu').css('display', 'none');
            jQuery('.memebers-header-logo span').click(function(){

                jQuery('.memebers-menu').toggle();

            });         
        }


    }

    function bodyClass(){           

        var memberAreaWidth = jQuery(window).width();
        if( memberAreaWidth > 900 ){
            jQuery('body').addClass('fullwidth');
        }else{
            jQuery('body').removeClass('fullwidth');
        }

    }

    jQuery(window).on("load resize",function(){

        menu();
        bodyClass();

    });

});

Answer 1

Move the click event delegation so it only happens once. The rest of the code looks fine.

var smallWidth = false;

jQuery('.memebers-header-logo span').click(function(){
    if (smallWidth){
        jQuery('.memebers-menu').toggle();
    }
});  

function menu(){

    var memberAreaWidth = jQuery(window).width();
    if( memberAreaWidth <= 900 ){

        jQuery('.memebers-menu').css('display', 'none');
        smallWidth = true;
    } else {
        smallWidth = false;
    }


}

Answer 2

Simplify your code a bit, put the event handlers outside the functions so they do not re-bind each time the function is called (which would end up with multiple event handlers firing); pass a parameter so you only have to calculate it once.

jQuery(document).ready(function() {
  jQuery('.memebers-header-logo span').on('click', function() {
    jQuery('.memebers-menu').toggle();
  });
  jQuery(window).on("load resize", function() {
    var memberAreaWidth = jQuery(window).width();
    menu(memberAreaWidth);
    bodyClass(memberAreaWidth);
  });

  function menu(memberAreaWidth) {
    if (memberAreaWidth <= 900) {
      jQuery('.memebers-menu').hide();
    }
  }

  function bodyClass(memberAreaWidth) {
    if (memberAreaWidth > 900) {
      jQuery('body').addClass('fullwidth');
    } else {
      jQuery('body').removeClass('fullwidth');
    }
  }
});