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

【问题标题】：Do something when window width less than 766px当窗口宽度小于 766px 时做一些事情
【发布时间】：2014-07-15 06:15:28
【问题描述】：

我正在尝试制作响应式下拉菜单栏，我想在 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）页面时，它可以工作。

我需要解决什么问题？

【问题讨论】：

虽然已经给出了正确答案，为什么还要用js来做呢？也许@media-querie 会适合您使用 CSS 的目的。 w3.org/TR/css3-mediaqueries

标签： jquery

【解决方案1】：

这样使用：

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

【讨论】：

如果你想限制函数调用：benalman.com/code/projects/jquery-throttle-debounce/examples/…
为什么最后要打.resize()？
@DimitarDimitrov 函数本身在调整大小处理程序中，在第一次加载时，如果您最后不使用它，它将无法工作...这意味着在加载时触发调整大小...
@DimitarDimitrov ：让它在第一次加载时工作。
当然，这是有道理的。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

你可以用函数包装你的代码，然后像这样从窗口调整大小事件中调用它：

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

【讨论】：

【解决方案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;
        });  
    }
}

【讨论】：

【解决方案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 ); 
    }); 
}
}

【讨论】：

【解决方案7】：

问题是您的宽度仅在 $(document).ready() 上计算，您应该找到一种方法，通过计时器等每隔 x 秒重新计算一次。

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

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

【讨论】：

你无缘无故地让它变得复杂，尤其是当你手头有 resize 事件时。你看，JavaScript 是 event driven。你需要放弃传统的编程模式，才能有效利用JavaScript的所有功能：）