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

hi, I have a problem with this script, specifically. I would like the element with id = "visibility" to have the display: none property when the browser window is> 767px, and an element has appeared on the page with id = "hidden" with the display: block property

When reduce browser window in developers tools it works, but when I refresh the page, the script does not work

Does anyone have any idea why ??

thanks for the help

Answer 1

This does not answer the question, but it will solve your problem much easier. Use media queries like this in your CSS file:

#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; }
}

Media query will "switch" your css styles, in case the width of your screen is less than 767px

Answer 2

this thing also happened to me i just tried this

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

       //your code 
       })