javascript - HTML 和 Javascript "Hamburger Menu"不工作

我想在我的 html 文件中使用 .js 脚本，但不幸的是我的脚本不能以正确的方式工作:(。我为我的网站构建了一个响应式导航栏，在小屏幕上有一个“汉堡菜单”。我设法在较小的屏幕上显示“汉堡菜单”，但如果我单击它，我的导航栏链接不会显示。这是我的 html 代码:

<!DOCTYPE html>
<html>
<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width", "initial-scale=1">


 <link rel="stylesheet" href="css/style.css">
 <script src="script/script.js"></script>

 <title>Title</title>

</head> 

<header>
 <nav class="navbar">
   <div class="branding">
     <a href="index.html"><img src="img/Logo.png" alt="Brand"></a>
   </div>
   <a href="#" class="toggle-button">
     <span class="bar"></span>
     <span class="bar"></span>
     <span class="bar"></span>
   </a>
   <div class="navbar-links">
     <ul>
       <li><a href="index.html">Home</a></li>
       <li><a href="artikel.html">Artikel</a></li>
       <li><a href="shop.html">Shop</a></li>
       <li><a href="handel.html">handel</a></li>
       <li><a href="kontakt.html">Kontakt</a></li>
     </ul>
   </div>
 </nav>
</header>


</body>

</html>

这里是我的CSS:

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

header{
  background-color: white;
  padding-top: 10px;
  min-height: 70px;
  border-bottom: black 3px solid;
  align-items: center;
}

.navbar{
  width: 80%;
  margin: auto;
  overflow: hidden;
  align-items: center;
}

.branding{
  float: left;
  margin: 0;
  padding: 0;
}

.navbar-links{
  margin-top: 25px;
  padding: 0;
  float: right;
}

.navbar-links ul{
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
}

.navbar-links ul li a{
  padding: 25px;
  color: black;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 500;
}

.navbar-links a:hover{
  color: #ffbf00;
}

.toggle-button{
  margin-top: 20px;
  position: absolute;
  top: .75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button .bar{
  height: 3px;
  width: 100%;
  color: black;
  background-color: black;
  border-radius: 10px;
}

@media (max-width: 1050px) {
  .toggle-button{
    display: flex;
  }

  .navbar-links{
    display: none;
    width: 100%;
  }

  .navbar{
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-links ul{
    width: 100%;
    flex-direction: column;
  }

  .navbar-links li{
    text-align: center;
  }

  .navbar-links li a{
    padding: .5rem 1rem;
  }

  .navbar-links.active{
    display: flex;
  }
}

我想最重要的部分是我的 javascript:

const toggleButton = document.getElementsByClassName('toggleButton')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

对不起，代码太多了，但我想在你的帮助下找出错误，所以我发布了我所有的代码。谢谢

最佳答案

它将是 toggle-button 而不是 toggleButton

const toggleButton = document.getElementsByClassName('toggle-button')[0];

const toggleButton = document.getElementsByClassName('toggle-button')[0];
const navbarLinks = document.getElementsByClassName('navbar-links')[0];
console.log(toggleButton);
toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

header{
  background-color: white;
  padding-top: 10px;
  min-height: 70px;
  border-bottom: black 3px solid;
  align-items: center;
}

.navbar{
  width: 80%;
  margin: auto;
  overflow: hidden;
  align-items: center;
}

.branding{
  float: left;
  margin: 0;
  padding: 0;
}

.navbar-links{
  margin-top: 25px;
  padding: 0;
  float: right;
}

.navbar-links ul{
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
}

.navbar-links ul li a{
  padding: 25px;
  color: black;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 500;
}

.navbar-links a:hover{
  color: #ffbf00;
}

.toggle-button{
  margin-top: 20px;
  position: absolute;
  top: .75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button .bar{
  height: 3px;
  width: 100%;
  color: black;
  background-color: black;
  border-radius: 10px;
}

@media (max-width: 1050px) {
  .toggle-button{
    display: flex;
  }

  .navbar-links{
    display: none;
    width: 100%;
  }

  .navbar{
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-links ul{
    width: 100%;
    flex-direction: column;
  }

  .navbar-links li{
    text-align: center;
  }

  .navbar-links li a{
    padding: .5rem 1rem;
  }

  .navbar-links.active{
    display: flex;
  }
}

<!DOCTYPE html>
<html>
<head>

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width", "initial-scale=1">


 <link rel="stylesheet" href="css/style.css">
 <script src="script/script.js"></script>

 <title>Title</title>

</head> 

<header>
 <nav class="navbar">
   <div class="branding">
     <a href="index.html"><img src="img/Logo.png" alt="Brand"></a>
   </div>
   <a href="#" class="toggle-button">
     <span class="bar"></span>
     <span class="bar"></span>
     <span class="bar"></span>
   </a>
   <div class="navbar-links">
     <ul>
       <li><a href="index.html">Home</a></li>
       <li><a href="artikel.html">Artikel</a></li>
       <li><a href="shop.html">Shop</a></li>
       <li><a href="handel.html">handel</a></li>
       <li><a href="kontakt.html">Kontakt</a></li>
     </ul>
   </div>
 </nav>
</header>

关于javascript - HTML 和 Javascript "Hamburger Menu"不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59231980/

javascript - HTML 和 Javascript "Hamburger Menu"不工作

上一篇：jquery - 有没有办法完全覆盖div中的复杂区域？

下一篇：html - 我有一个 div 部分，里面有 3 个 div 元素，我希望它们使用 html css 均匀间隔