Javascript 如何使用JS显示和隐藏我的响应汉堡菜单

我现在只是想教自己一些（普通的）Javascript，所以我假设这可能是一个非常基本的问题

目前，我已经用CSS媒体查询显示和隐藏了汉堡包菜单，所以当第一次加载页面时，它的工作方式与它应该的完全一样

问题：

在运行JS脚本（点击）打开hamburger菜单后，我再次打开窗口，hamburger菜单与应该在断点后显示的nav一起留在屏幕上

我尝试的是使用if语句基本上实现某种Javascript媒体查询魔术

if（window.matchMedia（'screen and（max width:48.62rem））.matches{document.getElementById（“mobile nav”）.style.display=“block”；
}否则{
document.getElementById（“移动导航”）.style.display=“无”；
};切换CSS类比使用JavaScript样式属性更干净、更容易。您应该这样使用它：


var btn=document.querySelector（“响应菜单”）；
var nav=document.querySelector（“nav”）；
btn.onclick=函数（）{
导航类列表切换（“扩展”）；
}
nav{
显示：无；
背景色：#ed0；
}
导航扩展{
显示：块；
}
点击我
菜单
除非有特定的东西需要测量，否则我发现最好只使用（更改）类名，以便在CSS中更清楚地显示发生了什么。解决这一问题的方法可能是监听窗口上的调整大小事件。一旦窗口大于您的限制，并且显示了汉堡包菜单，请将其隐藏。@D\N您知道，对于菜单栏这样简单的东西，这实际上是最好的解决方案。很简单，而且很有效。不过，纯粹出于好奇，如果出于任何原因，这不是一个选项，而我不得不按照我最初计划的方式（通过循环或其他方式）来做，你认为什么是最好的？@jollyswickers我知道这种回答很烦人，但我真的不会这么做。浏览器可以很快地重新绘制CSS更改，为什么要在您自己的JS中复制它的工作呢？需要对JS的功能有一个特殊的需求，以证明展示层和交互层的费用和混合是合理的。特别是对于内聚CSS框架或方法（请参见BEM）。如果需要在浏览器上重新评估内容，请调整大小，如果元素被多次调用，请确保使用和将元素隐藏在变量中，这样就不必再次查找它们。我有时会指定窗口调整大小事件，然后手动调用它。