javascript - 我的汉堡图标没有显示导航菜单

Question

我的 burger div 没有显示导航菜单。

我试图通过更改 JS 中的函数和我执行它们的方式来解决这个问题，但是当您将页面大小减小到 812 像素或更小时(媒体查询)，菜单仍然不显示。

HTML

<header>
          <nav>
            <div class="aw-container">
              <a href="Home.html"><img class="logo" src="img/logo.jpg"  width="60" height="50" alt="logo"></a>
              <div id="nav-class" class="aw-burger-open">
              <ul class="aw-navigation">
                <li><a class="aw-section-home" href="#">Home</a></li>
                <li><a class="aw-section-blog" href="#aw-blog">Blog</a></li>
                <li><a class="aw-section-link" href="#aw-contact">Travel</a></li>
                <li><a class="aw-section-newsletter" href="#aw-newsletter">Contact</a></li>
                <li><a class="aw-section-study" href="#aw-study">Planning</a></li>
                <li><a class="aw-section-search" href="aw-search">Search</a></li>
              </ul>
            </div>
                  <form class="searchbar" method="get">
                    <input type="text" id="s" placeholder="Search" name="search">
                    <div class=" close-icon">
                      <button type="button"><i class="fa fa-close"></i></button>
                  </div>
                </form>
                <div id = "burger-menu" class="burger" onclick="myFunction(this);toggleDropdown(this);">
                  <div class="bar1"></div>
                  <div class="bar2"></div>
                  <div class="bar3"></div>
                </div>
              </nav>
          </header>

CSS

@media screen and (max-width: 812px) {

    ul.aw-navigation{
      visibility: hidden;
    }

    #nav-class{
      display: flex;
      flex-direction: column;
    }

    /*Burger Menu */

    .burger {
      display: inline-block;
      cursor: pointer;
    }

    .bar1, .bar2, .bar3 {
      width: 20px;
      height: 2px;
      background-color: #333;
      margin: 6px 0;
      transition: 0.4s;
    }

    .change .bar1 {
      -webkit-transform: rotate(-45deg) translate(-4px, 3px);
      transform: rotate(-45deg) translate(-4px, 3px);
    }

    .change .bar2 {opacity: 0;}

    .change .bar3 {
      -webkit-transform: rotate(45deg) translate(-8px, -8px);
      transform: rotate(45deg) translate(-8px, -8px);
    }

}

JS

//Burger//

function myFunction(x) {
  x.classList.toggle("change");
}

function toggleDropdown() {
  document.getElementById("nav-class").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.burger')) {
    var dropdowns = document.getElementById("nav-class");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

控制台中没有显示任何错误。

myFunction() 将汉堡更改为 X 图标仍然有效 - toggleDropdown() 无效。

提前致谢!

Answer 1

1- <div class="aw-container">标签未关闭。2-添加类(class)表演。3- document.getElementByID 始终返回一个参数，因此您不能使用 for 循环。