Question

我有以下代码：

$(document).ready(function(){
 var widwith = $(window).width();
    if(widwith < 1150) {
        $('.menu-item-has-children').click(function(){
            $('.sub-menu').toggleClass('sub-display');
        });
    }else if(widwith > 1150) {
        $('.menu-item-has-children').hover(function(){
            $('.sub-menu').toggleClass('sub-display');
        });
    }
});

它会检测窗口宽度，并根据宽度在子菜单上单击（在移动设备上）或悬停在桌面上。我遇到的问题是，如果你调整窗口大小，我需要重新运行if语句，以防超过1150px宽的阈值...但我不知道我会怎么做？任何想法？

Answer 1

jQuery(document).ready(function(){
    jQuery( window ).resize(function() {
        resize();
    });
    resize();
});

function resize()
{
  var widwith = jQuery(window).width();
    if(widwith < 1150) {
        jQuery('.menu-item-has-children').click(function(){
            jQuery('.sub-menu').toggleClass('sub-display');
        });
    }else if(widwith > 1150) {
        jQuery'.menu-item-has-children').hover(function(){
            jQuery('.sub-menu').toggleClass('sub-display');
        });
    }
}

只需添加一个窗口调整大小处理程序。

Answer 2

您可以使用Jquery的resize方法

$(window).resize(function() {
   // put yout code here
});

Answer 3

你几乎就在那里。首先，您需要将核心调整大小事件逻辑拉入单独的函数，以便可以重复使用：

function resize() {
    var widwith = $(window).width();
    if(widwith < 1150) {
         $('.menu-item-has-children').click(function(){
              $('.sub-menu').toggleClass('sub-display');
         });
    }else if(widwith > 1150) {
         $('.menu-item-has-children').hover(function(){
              $('.sub-menu').toggleClass('sub-display');
          });
    }
}

这将使您的文档在准备好的监听器上看起来像这样：

jQuery(document).ready(function() {
    resize();
});

然后为resize事件添加一个事件监听器：

jQuery(window).resize(function() {
     resize();
});

应该这样做。

如果Windows上的语句调整大小，则重新运行jQuery。

3 个答案: