几个问题:
- 您添加新项目的逻辑始终是正确的(因为您只检查元素是否存在 - 它总是存在)。
- 您的子检查需要在宽度检查(单独检查)内。
- 您需要
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 引导程序,你可以简单地用一个适当的类(比如visible-md
)装饰面板,这一切都会发生在你身上:)