Question

当我调整窗口大小时，切换部分不起作用，我不得不再次刷新页面（使窗口保持调整大小状态）并且工作正常。

bodyClass（）部分工作正常，而不是menu（）部分。

请帮助：）

    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

移动click事件委托，使其只发生一次。其余的代码看起来很好。

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

稍微简化你的代码，将事件处理程序放在函数之外，这样每次调用函数时它们都不会重新绑定（最终会触发多个事件处理程序）;传递一个参数，所以你只需要计算一次。

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

jQuery切换不工作调整大小

2 个答案: