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');
    }
});

嗨，我的脚本有问题，特别是。我希望元素具有id =＆＃34; visibility＆＃34;当浏览器窗口为＆gt;时显示：none属性767px，页面上出现了一个元素，其中id =＆＃34; hidden＆＃34;使用display：block属性

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

有没有人知道为什么？

感谢您的帮助

Answer 1

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

<?xml version="1.0" encoding="UTF-8"?>
<bs-submission participant-id="0"
  run-id="GROUNDTRUTH"
  task="book-toc" 
  toc-creation="semi-automatic" 
  toc-source="full-content">
<source-files xml="no" pdf="no" />
<description>
This file contains the annotated groundtruth file (ideal ToCs) for the 2013 ICDAR Book Structure Extraction competition.
</description>
<book>
<bookid>6AD91AD5A04A7129</bookid>
<toc-entry title="DEDICATION." page="7"/>
<toc-entry title="HISTORICAL CATECHISM. CHIEFLY RELATING TO THE ENGLISH PROVINCE OF THE SOCIETY." page="9"/>
<toc-entry title="Collections, Illustrating the Biography, &amp;c." page="19">
<toc-entry title="SCOTCH MEMBERS, S. J." page="19"/>
</toc-entry>
<toc-entry title="Collections, Illustrating the Biography, &amp;c." page="44">
<toc-entry title="ENGLISH MEMBERS, S. J." page="44"/>
</toc-entry>
<toc-entry title="Collections, Illustrating the Biography, &amp;c." page="231">
<toc-entry title="IRISH MEMBERS, S. J." page="231"/>
</toc-entry>
<toc-entry title="REMARKS ON THE CASE OF THE JESUITS. 1829." page="271"/>
</book>

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

Answer 2

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

      $(window).on('load resize ', function () {

       //your code 
       })

jQuery window.resize在刷新后不起作用

2 个答案: