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媒体查询并保持了该页面不变。我以为循环可能是我的解决方案（也许是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>

Answer 1

与使用JavaScript样式属性相比，切换CSS类更加简洁明了。您应该这样使用它：

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 media queries。

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

1 个答案: