基于文档宽度的div滑块

我有一个div在单击时滑出（＃close-bar）。这工作正常，但我希望它只能在文档宽度为480px时触发的其他函数显示，但在文档宽度超过480px时隐藏。基于文档宽度的div滑块

这是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

来源

2014-09-03 user2371684

所以你要隐藏'＃特写bar'和禁止滑出了'＃近距离bar'时，窗口的宽度小于_480px_并允许滑出了'＃近距离bar'时，窗口的宽度等于还是大于_480px_？ – Regent 2014-09-03 12:12:10

你想要这个http://jsfiddle.net/gv6ffj0a/2/？ – 2014-09-03 12:12:42

谢谢，我通过添加媒体查询来看到您的建议，但我认为您可能误解了我，您的解决方案会否定其余部分的效果被我的脚本操纵。 @Giorgio的回复是一个可以解决的问题。 – user2371684 2014-09-03 12:30:05

我认为这是足以通过上述480像素（jsFiddle）CSS来隐藏它，对吗？

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

来源

2014-09-03 12:17:16 Giorgio

谢谢，您的解决方案已经解决。 – user2371684 2014-09-03 12:31:25

不客气！ :-) – Giorgio 2014-09-03 12:33:34

基于文档宽度的div滑块

回答

相关问题