0

我有一个响应式站点，并且我仅在屏幕宽度为 480 像素或以下时才尝试运行某些 jQuery 函数。我只能让它部分工作。如果您使用浏览器加载页面 < 480px 宽，它可以工作。但是如果你加载页面 > 480px 宽，然后将其调整为 <480，它就不起作用了。我需要它在两种情况下都能正常工作，在您相应调整大小时关闭和打开。我究竟做错了什么？只有当您在 <= 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
    }
});

* 更新 * 好的，根据下面的两个答案，我尝试混合两个答案。我知道要实现我想要的，我必须删除我添加到 <480 的所有代码，如果它是 >480。但是由于我有大约 10 个函数，因此必须单独删除每个函数似乎效率很低。因此，我尝试使用 window).resize 来简单地向 body 标签添加和删除“mobile”类。然后使用一个条件，“如果身体有一类移动，这样做....”我将包括我的 10 个功能。但是，这也只能部分起作用。类的添加/删除工作。但其余部分仅在您首先以 <480 加载页面时才有效。这是我到目前为止所拥有的小提琴。有没有办法使这项工作？

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

4

1 回答 1

0

添加代码作为调整大小处理程序，然后在 dom 就绪时触发调整大小事件。

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();
});

演示：问题和解决方案

于 2013-09-20T00:02:59.107 回答