Javascript IF屏幕寬度然后隱藏div

Question

試圖獲得一個結果，如果窗口大小小於900px，則項目在文檔加載時會隱藏起來。 但是，當我知道的代碼不在IF中工作時會遇到麻煩，而將其包含在IF語句中會不會起作用？

 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> 

更新：我似乎還沒有弄清楚頁面需要隱藏Menu項下的li元素，以便在隱藏/顯示時使用，當寬度<900px時無效，然后寬度超過900px 。

Answer 1

對於您的情況，您應該更喜歡僅使用媒體查詢來解決此問題。 此處無需使用javascript。 除此之外，您的邏輯是有缺陷的。

其背后的原因是：

1. 您無需等待DOM就緒回調就可以正常工作，它將感覺更快
2. 您的邏輯失敗，請考慮調整事件大小（如果用戶以970px寬度開始，然后再調整為700px寬度，會發生什么情況？）
3. 沒有理由將邏輯塊用於僅由CSS可視且可行的東西

“但是我真的很想使用JavaScript！”

看一下這種方法（未經測試）。 它解決了您的非調整大小檢查問題，並為所需的選擇器添加了干凈的類切換。

$(document).ready(function() {

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

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

   checkNeedForHiding();
});