jquery - 基于文档宽度的div滑块

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

这是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')
            }

        });

谢谢
-索耶尔

最佳答案

我认为足以通过480px（jsFiddle）以上的CSS隐藏它，对吗？

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