使用Window Size JavaScript显示和隐藏div？

我正在尝试显示基于两个或最好是三个定义的窗口大小的div用于移动设备。

我目前正在尝试实施：

 if( $(window).width() > 768 ) { $('#div1').show(); $('$div2').hide(); } else { } if( $(window).width() < 768 ) { $('#div1').hide(); $('$div2').show(); } else { }  

但这不起作用我在这里做错了什么？

Answer 1

你的div2选择器是错误的。 它应该是#而不是$ 。

此外，您应该考虑使用媒体查询！

 #div2 { display: none; } @media screen and (max-width : 768px) { #div1 { display: none; } #div2 { display: block; } } 

Answer 2

你需要在window.resize http://api.jquery.com/resize/ event中进行

是的，div2应该有＃not $