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>

更新：我似乎没有明确表示页面需要隐藏菜单项下的li元素，以便在隐藏/显示时使用，当宽度＆lt; 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();
});