时间戳

首页 > 解决方案 > 如何使用 JS 显示和隐藏我的响应式汉堡菜单

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

问题描述

我现在只是想自学一些（香草）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 媒体查询并保持页面不变。我在想一个循环可能是我的解决方案（也许是一个while循环？），但我不确定如何去做。

这是所有的 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>

标签： javascripthtmlcss

解决方案

切换 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 媒体查询。

推荐阅读