如何使我的响应式汉堡菜单出现并与JS隐藏

Question

目前我只是想自学一些（香草）JavaScript，所以我假设这可能是一个非常基本的问题。

目前，我已经显示并隐藏了带有CSS媒体查询的汉堡菜单，因此，当第一次加载页面时，它可以正常工作。

问题：

在运行JS脚本（单击）以打开汉堡菜单后，我再次扩大了窗口后，汉堡菜单与应在断点上出现的导航一起停留在屏幕上。

。

我尝试使用的是使用if语句基本上执行某种JavaScript媒体查询魔术。

if (window.matchMedia('screen and (max-width: 48.62rem)').matches) {document.getElementById("mobile-nav").style.display = "block";
    } else{
        document.getElementById("mobile-nav").style.display = "none";
      };

如果我从较小的窗口转到更宽的窗口，但汉堡菜单在屏幕上停留在屏幕上与以前一样，但再次单击它会消失。好东西，但是现在，当我再次使窗户变小时，菜单已经完全消失了。

我是JS的新手，所以我了解脚本是运行的，它覆盖了CSS媒体查询并保留这样的页面。我认为循环可能是我的解决方案（也许是一段时间循环吗？），但是我不确定该怎么做。

这是所有HTML，CSS和JavaScript：

function openNav(){
    document.getElementById("mobile-nav").style.display = "none";
    document.getElementById("menu-items").style.width = "100%";
};
function closeNav(){
    document.getElementById("menu-items").style.width = "0";
    if (window.matchMedia('screen and (max-width: 48.62rem)').matches) {document.getElementById("mobile-nav").style.display = "block";
    } else{
        document.getElementById("mobile-nav").style.display = "none";
    };
    
};

 #nav {
    display: none;
  }
  
#mobile-nav{
  float:right;
}
.open-nav {
  display:block;
  cursor: pointer;
  margin: 0.5rem 4rem 0 0;
  font-size: 35px;
  line-height: 70px;
}
.menu-items{
  text-align: center;
  width: 0%;
  overflow-x: hidden;
  height: 100vh;
  z-index: 50;
  position:fixed;
  background: rgba(24,24,24,0.9);
  transition:0.5s;
  display:block;
}
.menu-items a{
  clear:right;
  display:block;
  font-size: 1.25;
  padding:1em 0;
  transition:0.3s
}
.close-nav{
  float:right;
  margin:0.5rem 1em 0 0;
  font-size: 50px;
  color:rgb(206, 206, 206);
}
/* Media Queries*/
@media (min-width: 48.6rem) {
  /* Nav */
  #nav-bar{
    display:flex;
  }
  #nav {
    float:right;
    margin:0 5rem 0 0;
    display: flex;
  }
  #nav li {
    margin-right: 1em;
  }
  #mobile-nav {
    display: none;
  }

<div id="menu-items" class="menu-items">
        <a href="javascript:void(0)" class="close-nav" onclick="closeNav()">&times;</a>
        <a href="#section1" class="link lt-txt">...</a>
        <a href="#" class="link lt-txt">...</a>
        <a href="#" class="link lt-txt">...</a>
      </div>
      <nav id="nav-bar">
          <!--LOGO-->
          <div id="logo"><img src="./img/logo.png" alt="" /></div>
          <!--Mobile Nav-->
          <div id="mobile-nav">
            <span class="open-nav" onclick="openNav()">&#9776;</span>
          </div>
          <!--Main Nav-->
          <ul id="nav">
            <li>
              <a href="#section1" class="link">...</a>
            </li>
            <li>
              <a href="#" class="link">...</a>
            </li>
            <li>
              <a href="#" class="link">...</a>
            </li>
          </ul>
        </nav>

Answer 1

切换CSS类比使用JavaScript样式属性更清洁和容易。您应该以这种方式使用它：

var btn = document.querySelector("#responsive-menu");
var nav = document.querySelector("nav");
btn.onclick = function() {
  nav.classList.toggle("expand");
}

nav {
  display: none;  
  background-color: #ed0;
}
nav.expand {
  display: block;
}

<button id="responsive-menu">Click me</button>
<nav>
  Menu
</nav>

并为某些媒体大小指定不同的CSS，请使用CSS媒体查询。