Question

我只是在屏幕宽度超过960px时尝试启用jQuery函数，但是当我使用窗口调整大小功能时，我的代码完全停止工作。我怀疑代码有问题。

所以我的问题是，如果宽度为960px或更宽，我该如何启用jQuery函数？如果你不理解，我会尽力解释一下！

提前致谢！

的jQuery

function window_resize(){
if($(window).width() > 960){
    $('li#portfolio').on('mouseenter', function() {
    $(this).find('#subNav').addClass('active').hide().stop(true,true).fadeIn(300);
    }).on('mouseleave', function() {
    $(this).find('#subNav').stop(true,true).fadeOut(300);
});
}

Answer 1

如果你检查事件处理程序中的窗口大小，那将很容易。

    $('li#portfolio').on('mouseenter', function () {
        if ($(window).width() > 960) {
            $(this).find('#subNav').addClass('active').hide().stop(true, true).fadeIn(300);
        }
    }).on('mouseleave', function () {
        if ($(window).width() > 960) {
            $(this).find('#subNav').stop(true, true).fadeOut(300);
        }
    });

Answer 2

将此添加到您的代码中：

$(function()
{
    $( window ).resize(function(window_resize()) {})          
})

Answer 3

您需要将其与窗口调整大小事件结合使用：

$(window).resize(function() {
  console.log($(window).width());
  if ($(window).width() < 960) {
     console.log('Less than 960');
  }
  else {
     console.log('More than 960');
  }
});

Try in Fiddle

仅在超过特定窗口大小时才启用jQuery功能

3 个答案: