jQuery-根据屏幕大小执行脚本，同时调整窗口大小而不重新格式化？

如果有人能帮我吗

我已经编写了一个响应性布局，在大屏幕上是一种菜单类型，在小屏幕上是另一种。 以下是jquery代码：

if($(window).width() < 480){
        $('.menu_items').fadeOut(0);
        $('.menu-bar').click(function(){ 
            $('menu_items').fadeToggle(500 , "swing");
            });
        $('.menu_item').click(function() {
            $('menu-bar');
            });

    } else {

    $('.menu_items').fadeOut(0);
        $('.menu-bar').hover(function(){
            $(this).children().fadeIn(100, "swing");
            },function(){
                $(this).children().fadeOut(400, "swing");
                }).triger('mouseleave');
            };

if（$（窗口）.width（）<480）{
$（'.menu_items'）。淡出（0）；
$（'.menu bar'）。单击（函数（）{
$（‘菜单项’）.fadeToggle（500，“swing”）；
});
$（“.菜单项”）。单击（函数（）{
$（“菜单栏”）；
});
}否则{
$（'.menu_items'）。淡出（0）；
$（'.menu bar'）。悬停（函数（）{
$（this.children（）.fadeIn（100，“swing”）；
}，函数（）{
$（this.children（）.fadeOut（400，“swing”）；
}).triger（“mouseleave”）；
};

这工作很好！ 在屏幕尺寸为480x320及以下时，第一个功能激活，分辨率大于480px的第二个功能激活

问题是： 当我将窗口的大小调整到制动点（480px）之外时，当我加载html时，第一个函数仍然处于活动状态

---

我必须重新加载页面才能激活正确的函数。

您是否尝试过将其包装到jQuery resize函数中

使用window.resize：

window.onresize = function(event) {
    if($(window).width() < 480){
    $('.menu_items').fadeOut(0);
    $('.menu-bar').click(function(){ 
        $('menu_items').fadeToggle(500 , "swing");
        });
    $('.menu_item').click(function() {
        $('menu-bar');
        });

} else {

$('.menu_items').fadeOut(0);
    $('.menu-bar').hover(function(){
        $(this).children().fadeIn(100, "swing");
        },function(){
            $(this).children().fadeOut(400, "swing");
            }).triger('mouseleave');
        };
};

window.onresize=函数（事件）{
如果（$（窗口）.width（）<480）{
$（'.menu_items'）。淡出（0）；
$（'.menu bar'）。单击（函数（）{
$（‘菜单项’）.fadeToggle（500，“swing”）；
});
$（“.菜单项”）。单击（函数（）{
$（“菜单栏”）；
});
}否则{
$（'.menu_items'）。淡出（0）；
$（'.menu bar'）。悬停（函数（）{
$（this.children（）.fadeIn（100，“swing”）；
}，函数（）{
$（this.children（）.fadeOut（400，“swing”）；
}).triger（“mouseleave”）；
};
};

---

JQuery有一个函数。每当元素被重新zised时，都会调用该函数。您应该能够按如下方式使用它：

$( window).resize(function() {
    if(this.width() < 480){
      $('.menu_items').fadeOut(0);
    $('.menu-bar').click(function(){ 
        $('menu_items').fadeToggle(500 , "swing");
        });
    $('.menu_item').click(function() {
        $('menu-bar');
        });

  } else {

    $('.menu_items').fadeOut(0);
       $('.menu-bar').hover(function(){
         $(this).children().fadeIn(100, "swing");
         },function(){
            $(this).children().fadeOut(400, "swing");
            }).triger('mouseleave');
         };"
    }); 

$（窗口）。调整大小（函数（）{
if（this.width（）<480）{
$（'.menu_items'）。淡出（0）；
$（'.menu bar'）。单击（函数（）{
$（‘菜单项’）.fadeToggle（500，“swing”）；
});
$（“.菜单项”）。单击（函数（）{
$（“菜单栏”）；
});
}否则{
$（'.menu_items'）。淡出（0）；
$（'.menu bar'）。悬停（函数（）{
$（this.children（）.fadeIn（100，“swing”）；
}，函数（）{
$（this.children（）.fadeOut（400，“swing”）；
}).triger（“mouseleave”）；
};"
}); 

检查单击处理程序内的大小，并作出相应的反应LycharleTFL，同样的问题浏览器不会刷新脚本，$（窗口）。resize（函数（）{…在我将窗口大小调整一个像素之前，此操作不会做任何事。我还必须手动刷新浏览器。