Javascript 如果屏幕宽度那么隐藏 div

Question

尝试获得一个结果，如果 window 大小小于 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>

UPDATE:我好像没说清楚，页面需要隐藏Menu项下的li元素，用于hide/show , 当width < 900px 然后没有效果那么宽度超过900px.

Answer 1

在你的情况下，你应该更喜欢只使用媒体查询来解决这个问题。这里不需要使用 javascript。除此之外，你的逻辑也有问题。

这背后的原因是：

您将无需等待 DOM 就绪回调使其工作，感觉会更快
考虑调整事件大小的逻辑失败（如果用户从 970 像素宽度开始，然后调整到 700 像素宽度，会发生什么情况？）
CSS

"But I really want to use 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();
});

Javascript 如果屏幕宽度那么隐藏 div

Javascript IF screen width then hide div

javascript

jquery

if-statement

show-hide

nav

"But I really want to use javascript!"