javascript - 刷新后 jQuery window.resize 不起作用

Question

<div id="visibility" class="image col-md-7 col-sm-7">
  <img class="graphics img-responsive" src="http://placehold.it/400x300">
  <img class="graphics img-responsive" src="http://placehold.it/400x300">
</div>  
<div id="hidden" class="media-carousel">
   <div class="responsive">
     <div><img class="graphics img-responsive" src="http://placehold.it/400x300"></div>
     <div><img class="graphics img-responsive" src="http://placehold.it/400x300"></div>
     <div><img class="drawing img-responsive" src="http://placehold.it/400x300"></div>
     <div><img class="drawing img-responsive" src="http://placehold.it/400x300"></div>
   </div>

    $(window).on('resize', function () {
    if ($(window).width() >= 767) {
        $('#hidden').css('display', 'none');
        $('#visibility').css('display', 'block');
        $('#none').css('display', 'none');
        $('#block').css('display', 'block');
    } else {
        $('#hidden').css('display', 'block');
        $('#visibility').css('display', 'none');
        $('#none').css('display', 'block');
        $('#block').css('display', 'none');
    }
});

嗨，我对这个脚本有一个具体的问题。我希望当浏览器窗口 > 767px 时， id = "visibility"的元素具有 display: none 属性，并且页面上出现 id = "hidden"且具有 display: block 属性的元素

当在开发人员工具中减少浏览器窗口时，它可以工作，但是当我刷新页面时，脚本不起作用

有人知道为什么吗？

感谢您的帮助

Answer 1

这并不能回答问题，但它会更容易地解决您的问题。在 CSS 文件中使用这样的媒体查询:

#hidden { display: none; }
#visibility { display: block; }
#none { display: none; }
#block { display: block; }

@media only screen and (max-width: 767px) {
  #hidden { display: block; }
  #visibility { display: none; }
  #none { display: block; }
  #block { display: none; }
}

媒体查询将“切换”您的 CSS 样式，以防您的屏幕宽度小于 767px