0

伪代码:

  1. 如果窗口大小等于/或大于 768,则从 #sidebar 获取内容并将其输入占位符 div
  2. 如果窗口大小小于 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);

});

但问题是,在第一页加载时,一切都执行得很好,但在调整大小并再次返回时,脚本没有完成他的工作。同样在每次调整侧边栏的所有内容时,都会在占位符中输入多次(而不是一次)。

还有我的工作jsfiddle。

我只是不知道我做错了什么。

4

2 回答 2

1

几个问题:

  • 您添加新项目的逻辑始终是正确的(因为您只检查元素是否存在 - 它总是存在)。
  • 您的子检查需要在宽度检查(单独检查)内。
  • 您需要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)装饰面板,这一切都会发生在你身上:)

于 2015-04-21T10:39:12.590 回答
0

将事件监听器放在document.ready()函数外:

$(document).ready(function(){
    ...
});

$(window).resize(checkWidth);

另外,取出checkWidth()函数外的document.ready()函数。

于 2015-04-21T10:33:26.103 回答