Javascript IF屏幕宽度然后隐藏div

Question

Trying to get a result whereby if the window size is less that 900px then the items hide themselves on document load. However running into trouble as the code I know works when not in an IF wont work when it is enclosed in an IF statement?

 var searchEl = document.querySelector("#input"); if ($(window).width() > 960) { $(document).ready(function(){ $("#hide").load(function(){ $(".mobile-nav-hide").hide(); }); $("#toggle").click(function(){ $(".mobile-nav-hide").toggle(); }); }); } 

 h4.mobile-nav { font-family: GillSansMTStd-Medium; color: #5F5A51; display: block; text-align: center; padding: 15px 0px; text-decoration: none; } h4.mobile-nav:hover { background-color: #7BAF8A; } @media (min-width: 900px) { h4.mobile-nav { display: none; } } @media (min-width: 1024px) { h4.mobile-nav { display: none; } } nav { margin: 0 auto; padding: 0px; width: 0 auto; } @media (min-width: 900px) { nav { margin: 0 auto; padding: 0px; width: 851px; } } @media (min-width: 1024px) { nav { margin: 0 auto; padding: 0px; width: 924px; } } ul.nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #E8DDBF /*#E8DFCE*/; } @media (min-width: 900px) { ul.nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #E8DDBF /*#E8DFCE*/; height: 35px; } } @media (min-width: 1024px) { ul.nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #E8DDBF /*#E8DFCE*/; height: 40px; } } li.nav { width: auto; } @media (min-width: 900px) { li.nav { width: auto; float: left; margin-left: 15px; } } @media (min-width: 1024px) { li.nav { width: auto; float: left; margin-left: 15px; } } li.nav a.nav { font-family: GillSansMTStd-Medium; font-size: 14px; color: #5F5A51; display: block; text-align: center; padding: 12px 16px; text-decoration: none; } @media (min-width: 900px) { li.nav a.nav { font-family: GillSansMTStd-Medium; font-size: 12px; color: #5F5A51; display: block; text-align: center; padding: 12px 16px; text-decoration: none; } } @media (min-width: 1024px) { li.nav a.nav { font-family: GillSansMTStd-Medium; font-size: 14px; color: #5F5A51; display: block; text-align: center; padding: 14px 16px; text-decoration: none; } } li.nav a.nav:hover:not(.active) { background-color: #7BAF8A; color: #FFFFFF; } 

 <div id="nav-container"> <nav> <h4 class="mobile-nav" button id="toggle">Menu</h4> <div class="mobile-nav-hide"> <ul class="nav" class="search"> <li class="nav" style="margin-left: 0px;"><a class="nav" href="#home">TEXT &amp; TEXT</a></li> <li class="nav"><a class="nav" href="#home">TEXT</a></li> <li class="nav"><a class="nav" href="#home">TEXT</a></li> <li class="nav"><a class="nav" href="#home">TEXT</a></li> <li class="nav"><a class="nav" href="#home">TEXT</a></li> <li class="nav"><a class="nav" href="#home">TEXT &amp; TEXT</a></li> <li class="nav"><a class="nav" href="#home">TEXT &amp; TEXT</a></li> <li class="nav"><a class="nav" href="#home">TEXT</a></li> <li class="nav"><a class="nav" href="#home">TEXT</a></li> </ul> </nav> </div> 

UPDATE: I don't seem to have made it clear that the page needs to hide the li elements under the Menu item, for use in the hide/show, when the width < 900px and then have no effect then the width is over 900px.

Answer 1

In your case, you should prefer using only media queries for this problem. There is no need for using javascript here. Besides that, your logic is flawed.

The reason behind this is that:

1. Your will not need to wait for the DOM ready callback to make it work, it will feel faster
2. Your logic fails consider resizing events (If the user starts at 970px width but then resizes to 700px width, what happens?)
3. There is no reason to use logic blocks for something that is merely visual and doable by CSS

"But I really want to use javascript!"

Take a look at this approach (not tested). It fixes your non-resizing-checking issue and adds a clean toggling of classes for your desired selector.

$(document).ready(function() {

   function checkNeedForHiding() {
      // TODO Use throttling here
      $(".mobile-nav-hide").toggleClass("hidden", function() { return $(window).width() > 960; } ); 
   }

   $( window ).resize(function() {
     checkNeedForHiding();
   });

   checkNeedForHiding();
});