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

问题描述

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

I'm trying to show a div based on two or preferably three defined window sizes for mobile.

我目前正在尝试实施:

<script>

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

}

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

}

</script>

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

But it isn't working what am I doing wrong here?

推荐答案

您的div2选择器错误.它应该是#而不是$.

Your div2 selector is wrong. It should be a # not a $.

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

Also, you should consider using media queries for this!

#div2 {
  display: none;
}

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

这篇关于使用Window Size JavaScript显示和隐藏div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！