jQuery切换无法调整大小

jQuery toggle not working on resize

本文关键字：调整 jQuery      更新时间：2023-09-26

当我调整窗口大小时，切换部分不起作用，我不得不再次刷新页面（保持窗口处于调整大小的状态），它工作得很好。

bodyClass（）部分运行良好，只是菜单（）部分没有。

请帮助：）

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

移动点击事件委派，使其只发生一次。代码的其余部分看起来不错。

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

}

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

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');
    }
  }
});
相关文章：