【发布时间】: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