Question

如果有人可以帮助我吗？

我编写了一个响应式布局，大屏幕是一种菜单，另一种是小型菜单。这是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');
            };

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

问题在于：当我将窗口调整到超出制动点（480px）之后，当我加载html时，第一个功能仍然有效。

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

Answer 1

您是否尝试将其包装在jQuery resize函数中？

https://api.jquery.com/resize/

Answer 2

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

JavaScript window resize event

Answer 3

JQuery有一个函数.resize，只要元素被重新调用就会被调用。您应该可以按如下方式使用它：

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

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

3 个答案: