我有一个响应式网站,我只是在屏幕处于或低于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时才有效。这是我到目前为止的一个小提琴。有没有办法使这项工作?
答案 0 :(得分:0)
将代码添加为调整大小处理程序,然后在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();
});