伪代码:
- 如果窗口大小等于/或大于 768,则从#sidebar 中取出内容并将其输入到占位符 div 中
- 如果窗口大小小于 768,则不要运行上面的程序。
我的 jQuery 代码如下:
$(document).ready(function () {
var $window = $(window);
function checkWidth() {
//set main vars
var windowsize = $window.width();
var $sideBarContent = $('#sidebar .dummy-content');
var $placeHolder = $('#place-holder');
//perform the main check
if (windowsize >= 768 && $('#place-holder').length) {
$($sideBarContent).clone(true)
.appendTo($($placeHolder));
}
else {
$($placeHolder).hide();
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});
但问题是,在第一个页面加载时,一切都表现良好,但在调整大小并再次返回时,脚本没有完成他的工作。同样在每次调整侧边栏中的所有内容时,都会在占位符中输入多次(而不是一次)。
我只是不知道我做错了什么。
最佳答案
几个问题:
- 您添加新元素的逻辑始终为真(因为您只检查该元素是否存在 - 它总是存在)。
- 您的子支票需要在宽度支票内(单独的支票)。
- 您需要再次显示
placeHolder
div! - 你在 jQuery 变量周围有一些冗余的
$()
- 你有 jQuery 变量,用于所有必需的元素,但有时你没有使用它们。
例如
$(document).ready(function () {
var $window = $(window);
function checkWidth() {
//set main vars
var windowsize = $window.width();
var $sideBarContent = $('#sidebar .dummy-content');
var $placeHolder = $('#place-holder');
//perform the main check
if (windowsize >= 768) {
if (!$placeHolder.children().length) {
$sideBarContent.clone(true)
.appendTo($placeHolder);
}
$placeHolder.show();
} else {
$placeHolder.hide();
}
}
// Bind event listener and do initial execute
$window.resize(checkWidth).trigger("resize");
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/jtfv4jjt/8/
注意:您的代码可以进一步简化,因为您只需要在开始时克隆一次,然后只需切换该面板的可见性即可。
例如
$(document).ready(function () {
var $window = $(window);
var $sideBarContent = $('#sidebar .dummy-content');
var $placeHolder = $('#place-holder');
function checkWidth() {
$placeHolder.toggle($window.width() >= 768);
}
// Clone at start - then hide it
$sideBarContent.clone(true).appendTo($placeHolder);
// Bind event listener and do initial execute
$window.resize(checkWidth).trigger("resize");
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/jtfv4jjt/6/
同样可以缩短:
$(function () {
var $window = $(window);
var $sideBarContent = $('#sidebar .dummy-content');
var $placeHolder = $('#place-holder');
// Clone content at start - then hide it
$sideBarContent.clone(true).appendTo($placeHolder);
// Bind event listener and do initial execute
$window.resize(function(){
$placeHolder.toggle($window.width() >= 768)
}).trigger("resize");
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/jtfv4jjt/7/
现在就这些了:)
最后一点:
如果你使用 Twitter bootstrap,你可以简单地用一个合适的类(比如 visible-md
)装饰面板,所有这一切都会为你发生:)
关于javascript - jQuery 窗口调整大小无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29769670/