jQuery窗口调整大小不正常

时间:2015-04-21 10:31:16

标签: javascript jquery css onresize

伪代码:

  1. 如果窗口大小等于/或大于768,则从#sidebar获取内容并在占位符div中输入
  2. 如果窗口大小小于768,请不要运行上述内容。
  3. 我的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);
    
    });
    

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

    And my working jsfiddle.

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

2 个答案:

答案 0 :(得分:1)

一些问题:

  • 添加新项目的逻辑始终为真(因为您只检查元素是否存在 - 它始终存在)。
  • 您的孩子检查需要在宽度检查范围内(单独检查)。
  • 您需要再次显示placeHolder div!
  • jQuery变量有一些冗余$()
  • 您有所有必需元素的jQuery变量,但有时您不使用它们。

e.g。

$(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/

注意:您的代码可以进一步简化,因为您只需要在开始时克隆一次,然后只需切换该面板的可见性。

e.g。

$(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)来装饰面板,所有这些都会发生在您身上:)

答案 1 :(得分:0)

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

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

$(window).resize(checkWidth);

另外,请取出checkWidth()功能之外的document.ready()功能。