Question

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

我目前正在尝试实施：

<script>

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

}

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

}

</script>

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

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/事件

中执行此操作

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

}

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

}
});
</script>

是的，div2应该有＃not $

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

2 个答案: