【问题标题】:jQuery window.resize doesn't work after refresh刷新后jQuery window.resize不起作用
【发布时间】:2018-09-22 17:16:40
【问题描述】:
<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');
    }
});

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

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

有人知道为什么吗??

感谢您的帮助

【问题讨论】:

  • 您可以通过使用 CSS 媒体查询以给定分辨率隐藏/显示元素来完全避免该问题。它的性能也会比 JS 好得多
  • 因为只有在调整窗口大小时才会触发调整大小。刷新不是调整大小。您也必须在 document.ready 上调用您的函数,或者甚至更好:改用 CSS 媒体查询。
  • CSS @media-queries 这个解决方案原来是最好的

标签: javascript jquery resize refresh display


【解决方案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 样式,以防你的屏幕宽度小于 767 像素

【讨论】:

    【解决方案2】:

    这件事也发生在我身上,我刚试过这个

          $(window).on('load resize ', function () {
    
           //your code 
           })
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-08-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-12-26
      • 1970-01-01
      • 2017-04-29
      • 1970-01-01
      相关资源
      最近更新 更多