Javascript如果屏幕宽度，则隐藏div

试图得到这样一个结果，即如果窗口大小小于900px，则项目会在文档加载时隐藏自己。然而，当我知道的代码不在IF语句中时会遇到麻烦，当它包含在IF语句中时不会工作

var searchEl=document.querySelector（“输入”）；
如果（$（窗口）.width（）>960）{
$（文档）.ready（函数（）{
$（“#隐藏”）.load（函数（）{
$（“.mobile nav hide”）.hide（）；
});
$（“#切换”）。单击（函数（）{
$（“.mobile nav hide”）.toggle（）；
});
});
}

h4.mobile-nav{
字体系列：GillSansMTStd中等；
颜色：#5F5A51；
显示：块；
文本对齐：居中；
填充：15px 0px；
文字装饰：无；
}
h4.移动导航：悬停{
背景色：#7BAF8A；
}
@介质（最小宽度：900px）{
h4.移动导航{
显示：无；
}
}
@介质（最小宽度：1024px）{
h4.移动导航{
显示：无；
}
}
导航{
保证金：0自动；
填充：0px；
宽度：0自动；
}
@介质（最小宽度：900px）{
导航{
保证金：0自动；
填充：0px；
宽度：851px；
}
}
@介质（最小宽度：1024px）{
导航{
保证金：0自动；
填充：0px；
宽度：924px；
}
}
ul导航{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#E8DDBF/*#E8DFCE*/；
}
@介质（最小宽度：900px）{
ul导航{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#E8DDBF/*#E8DFCE*/；
高度：35px；
}
}
@介质（最小宽度：1024px）{
ul导航{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#E8DDBF/*#E8DFCE*/；
高度：40px；
}
}
li.nav{
宽度：自动；
}
@介质（最小宽度：900px）{
li.nav{
宽度：自动；
浮动：左；
左边距：15px；
}
}
@介质（最小宽度：1024px）{
li.nav{
宽度：自动；
浮动：左；
左边距：15px；
}
}
李娜{
字体系列：GillSansMTStd中等；
字体大小：14px；
颜色：#5F5A51；
显示：块；
文本对齐：居中；
填充：12px 16px；
文字装饰：无；
}
@介质（最小宽度：900px）{
李娜{
字体系列：GillSansMTStd中等；
字体大小：12px；
颜色：#5F5A51；
显示：块；
文本对齐：居中；
填充：12px 16px；
文字装饰：无；
}
}
@介质（最小宽度：1024px）{
李娜{
字体系列：GillSansMTStd中等；
字体大小：14px；
颜色：#5F5A51；
显示：块；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
}
li.nav a.nav:悬停：未（.active）{
背景色：#7BAF8A；
颜色：#FFFFFF；
}

菜单

在您的情况下，您应该只使用媒体查询来解决此问题。 这里不需要使用javascript。除此之外，你的逻辑是有缺陷的

这背后的原因是：

您不需要等待DOM就绪回调使其工作，它会感觉更快

<> LI>您的逻辑无法考虑调整大小事件（如果用户以970px宽度开始，但调整大小为700 px宽度，发生了什么？）

没有理由将逻辑块用于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();
});

---

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

这背后的原因是：

您不需要等待DOM就绪回调使其工作，它会感觉更快

<> LI>您的逻辑无法考虑调整大小事件（如果用户以970px宽度开始，但调整大小为700 px宽度，发生了什么？）

没有理由将逻辑块用于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();
});

---

那么if条件是错误的，而不是代码块。前两行应该在“

$（文档）内.ready

。其次，您已经在使用媒体查询了。在这种情况下，为什么不也使用它们呢？如果我使用下面的js，该函数可以工作，但是当页面>900px时，导航没有显示任何内容，这就是为什么我试图使加载时隐藏以页面宽度为条件。$（文档）。ready（函数（）{$（“#隐藏”）.load（函数（）{$（“.mobile nav hide”）.hide（）；$（“#toggle”）。单击（函数（）{$（“.mobile nav hide”）.toggle（）；}）；这是一个JavaScript作业，而不是CSS媒体查询，这两者之间的区别是什么？您可以创建一个媒体查询，说明当页面宽度>960px时隐藏特定元素。正如@caulitomaz在回答中提到的，如果您在JavaScript中实现此逻辑：如果ey决定以较小的尺寸查看屏幕，您希望在其中显示特定元素。媒体查询的情况正好相反。然后if条件是错误的，而不是代码块。首先，您的JavaScript是错误的。前两行应该在“

$（document）.ready

内。其次，您已经在使用媒体查询。在这种情况下，为什么不直接使用它们呢？如果我使用下面的js，该功能会工作，但是当页面>900px时，导航没有显示任何内容，这就是为什么我试图使