Question

我试图制作响应式下拉菜单栏，我想在PC和移动设备之间设置不同的jQuery事件。

所以我做了一些jQuery事件......

如果窗口宽度小于767px，请执行某些操作，否则......

这是我的代码。

$(document).ready(function(){
    if ($(window).width() < 767) {   
        $('.mGnb a').click(function() {
            $('#subLayer').slideToggle(200);
            return false;
        });  
    }
    else {  
        $('.mGnb a').hover(function() {
            $('#subLayer').slideUp(200);
            return false;
        });  
    }); 
});

工作正常。但问题是当我调整窗口大小时，jQuery不起作用。它在我调整页面大小和刷新（F5）时有效。

我需要修理它？

Answer 1

像这样使用：

$(window).on('resize',function(){
//your code here
}).resize();

Answer 2

您可以使用window.matchMedia，例如：

if (window.matchMedia("(max-width: 765px)").matches) {
  /* mobile view related javascript */
} else {
  /* desktop view related javascript */
}

更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia

Answer 3

而不是在准备文件时这样做。将事件处理程序附加到窗口的resize事件。

Answer 4

您可以使用函数包装代码并从窗口调整大小事件中调用它，如下所示：

$(window).resize(function(){
     //your function here
});

Answer 5

要在窗口调整大小上执行某些操作，您可能需要为resize事件添加事件处理程序。

像这样。

$(document).on('ready',function(){
    $(window).on('resize',function(){
        resize();
    })
});

function resize(){
    if ($(window).width() < 767) {   
        $('.mGnb a').click(function() {
            $('#subLayer').slideToggle(200);
            return false;
        });  
    }
    else {  
        $('.mGnb a').hover(function() {
            $('#subLayer').slideUp(200);
            return false;
        });  
    }
}

Answer 6

$(document).ready(myfunc);
$(window).resize(myfunc);
function myfunc(){
if ($(window).width() < 767)
{   
    $('.mGnb a').click(function()
    {
        $('#subLayer').slideToggle(200);
        return false;
    });
}
else
{
    $("#header").mouseleave(function()
    {
        $(this).animate({height: "96px"}, 200 ); 
    }); 
}
}

Answer 7

问题是你的宽度只能在$（document）.ready（）上计算出来，你应该找到一种方法，每隔x秒就用一个计时器等来重新计算它。

setInterval(function(){
var width = $(".element").width();
},100);

这样，可变宽度每0.1秒更新一次。

窗口宽度小于766px时做一些事情

7 个答案: