Javascript 调整浏览器大小时，我的导航将消失

所以，这是一个我目前正在开发的网站，除了这个：
当我被一个正在查看我当前代码的家伙警告时，我的菜单/导航在媒体查询状态下打开和关闭后消失，并重新调整到监视器宽度。

简化-按照以下步骤查看问题：
打开代码片段（我建议使用CodePen，因为它正确地显示了结果），简单地欣赏一下我的设计。就这样，谢谢你的帮助。开玩笑吧，下一步：将浏览器调整到所提到的大小（宽度为480px或更小），以便您看到右上角的汉堡包菜单图标，单击图标打开菜单，关闭它，然后将浏览器更改回全屏大小！你看到左边的导航栏了吗
我在这里遗漏了什么？我想对于一些后置状态（刚刚开始学习JS，所以我不知道），应该多写几行JavaScript，但请仔细研究并教我可能的解决方案
是的，我知道，这不应该影响我的媒体查询所针对的任何移动用户，因为没有人会像这样调整它的大小，几乎没有人会看到这一点，但是……第一件事——我想让它变得完美，第二件事——如果我错过了什么或做错了什么，我想听到它，并学习如何修复/纠正它
这是代码笔链接：
下面是代码片段：

函数myFunction（）{
var x=document.getElementById（“菜单”）；
如果（x.style.display==“块”）{
x、 style.display=“无”；
} 
否则{
x、 style.display=“block”；
}
}

@仅媒体屏幕和（最大宽度：480px）{
.networks、.sidenav、.image行、.foot1、.foot3{
显示：无；
}
身体{
显示：块；
宽度：100%；
身高：100%；
背景色：#e1e1；
}
.换页{
显示：块；
边际上限：0px；
宽度：100%；
身高：100%；
左边距：自动；
右边距：自动；
z指数：0；
}
.标志{
显示：内联块；
浮动：左；
宽度：75%；
左缘：2.5%；
}
.登录{
宽度：200%；
}
梅纽康先生{
显示：内联块；
浮动：对；
宽度：10%；
利润率最高：6%；
保证金权利：5.5%；
边界：无；
z指数：3；
}
.导航按钮{
显示：块；
宽度：100%；
背景色：#e1e1；
边界：无；
z指数：3；
}
.导航按钮：焦点{
大纲：无；
}
#菜单{
显示：无；
位置：相对位置；
宽度：90%；
左缘：5%；
保证金权利：5%；
利润率最高：2.5%；
垫底：2.5%；
z指数：3；
}
梅因先生{
显示：块；
宽度：90%；
高度：自动；
垫底：7.5%；
利润率最高：2.5%；
左缘：5%；
保证金权利：5%；
z指数：1；
}
.文本框{
显示：块；
宽度：95%；
利润率最高：5%；
左边距：自动；
右边距：自动；
字号：1.25em；
文本对齐：对齐；
}
.我的照片{
显示：块；
宽度：50%；
左边距：自动；
右边距：自动；
}
.foot2{
显示：块；
宽度：100%；
垫面：5%；
垫底：5%；
字号：1.25em；
颜色：#324B64；
}
}

卢卡诺瓦克
对于所有的错误，我们都要清楚地认识到这一点，因为我们必须清楚地认识到，所有人都应该受到赞扬、尊重和尊重，因为他们都是发明家和准建筑师。Nemo enim ipsam Voluptate是一个有着丰富经验的人，他是一个理性的人。最重要的一点是，在劳动和就业领域，所有人都有自己的权利、义务和义务。但是最低限度的成本，是否需要在实验室中进行实际操作，是否需要从消费品中获得流动性？“你是否有权利在一个自由的环境中为他人辩护？你是否有权利在一个自由的环境中为他人辩护？”
一些信息
由我设计
更多信息

最好使用CSS类来完成此操作，该类仅在移动媒体查询中更改

CSS

JS

“element.style”的那些属性只能设置一个值，而不能获取它们的值（可以运行“console.log（x.style.display）”来证明这一点）。如果必须获取元素的样式，请尝试“”

通常，我会通过添加一个类来隐藏一个元素，然后通过删除该类来显示它

const el=document.querySelector（'.some元素'）
函数hideElement（）{
如果（！el.classList.contains（'hidden'））{
el.classList.add（'hidden'）
}
}
函数showElement（）{
if（el.classList.contains（'hidden'））{
el.classList.remove（'hidden'）
}
}

。隐藏{
显示：无；
}
/*如果你不想那个元素真的消失，你可以试试这个
.隐藏{
不透明度：0；
}
*/

---

在手机上关闭导航，然后调整到桌面后，导航就会消失，因为JavaScript使用了

显示的内联css样式：
@media only screen and (max-width: 480px) {
  .mobileshow {
    display: block !important;
  }
}

function myFunction() {
  var x = document.getElementById("menu");
  if(x.classList.contains("mobileshow")) {
    x.classList.remove("mobileshow");
  }
  else {
    x.classList.add("mobileshow");
  }
}