div滑块基于文档宽度

Question

我有一个div点击时滑出（＃close-bar）。这工作正常，但我希望它仅在doc宽度为480px时被触发的其他函数可见，但隐藏在480px以上的doc宽度上。

这是jsfiddle上的sample。

$(function () {
    $(window).resize(ChangeDiv);
    $(window).trigger("resize");   
});

function ChangeDiv() {
    var width = $(window).width();
    if (width <= 480) {
        $("#menu").after($("#header"));
        $("#headerRight form").prependTo($("#footer"));
    } else {
        $("#header").after($("#menu"));
        $("#footer form").appendTo($("#headerRight"));
    }
}

var speed = 300;
        $('#close-bar').on('click', function(){

            var $$ = $(this),
                panelWidth = $('#hiddenPanel').outerWidth();

            if( $$.is('.myButton') ){
                $('#hiddenPanel').animate({right:0}, speed);
                $$.removeClass('myButton')
            } else {
                $('#hiddenPanel').animate({right:-panelWidth}, speed);
                $$.addClass('myButton')
            }

        });

由于 -Sohail

Answer 1

我认为通过CSS将其隐藏在480px（jsFiddle以上）已经足够了，对吧？

@media only screen and (min-width:480px) 
{
    #close-bar {
        display:none;
    }
}