Question

我有一个响应式网站，我只是在屏幕处于或低于480px宽时尝试运行某些jQuery功能。我只能让它部分工作。如果您使用浏览器加载页面＆lt; 480px宽，它的工作原理。但是如果你加载页面＆gt; 480px宽，然后将其调整为<480，它不起作用。我需要它在两种情况下工作，在你相应调整大小时关闭和打开。我究竟做错了什么？只有当您在＆lt; = 480。

加载页面时，我才能使用此功能

jQuery(document).ready(function($){
    if ( $("div#wrapper").css("overflow") === "visible") {      
    // mobile js goes here
}
});

我也尝试过这种方式，但是一旦我调整大小，就会开始循环播放“移动js到这里”部分的所有内容并崩溃浏览器???

$(window).resize(function(){    
    if ( $("div#wrapper").css("overflow") === "visible") {
        // mobile js goes here
    }
});

*更新* 好的，基于下面的两个答案，我试着将这两个答案混合起来。我明白要实现我想要的，我必须删除我添加到＆lt; 480的所有代码，如果它是＆gt; 480。但由于我有大约10个函数，所以单独删除每个函数似乎效率很低。所以相反，我尝试使用窗口）.resize来简单地添加和删除一个“移动”类到body标签。然后使用一个条件，“如果身体有一类移动，做这个....”我将包括我的10个功能。但是，这只是部分有效。添加/删除类有效。但其余部分只有在您首次加载页面<480时才有效。这是我到目前为止的一个小提琴。有没有办法使这项工作？

http://jsfiddle.net/UAkHz/59/

Answer 1

将代码添加为调整大小处理程序，然后在dom ready上触发resize事件。

jQuery(function ($) {
    var resizeflag = false;
    $(window).resize(function () {
        if ($("#wrapper").css("overflow") === "visible") {
            if(resizeflag == false){
                resizeflag = true;
                $("#wrapper").append('<div class="test">test</div>')
            }
        } else {
            if(resizeflag == true){
                resizeflag = false;
                $("#wrapper .test").remove();
            }
        }
    }).resize();
});

演示：Problem＆amp; Solution

jQuery媒体查询适用于调整大小和加载？

1 个答案: