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

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选择器是错误的。它应该是 a#不是 a $。

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

#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 应该有 # 而不是 $