HTML 和 Javascript“汉堡菜单”不起作用

Question

I want to use a .js script in my html file, but unfortunately my script does not work the right way :(. I build a responsive Navbar for my website with a "hamburger Menu" on small screensizes. I managed it to show the "Hamburger Menu" on a smaller screensize but my navbarlinks don't show up if I click on it. Here my html code:我想在我的 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>

here my css:这是我的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;
  }
}

and the important part I guess, my javascript:和我猜的重要部分，我的javascript：

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

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

Sry for the lot of code, but I want to find the mistake with your help so I post all of my code. Sry 有很多代码，但我想在你的帮助下找到错误，所以我发布了我所有的代码。 Thanks谢谢

Answer 1

it will be toggle-button not toggleButton in这将是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>

HTML 和 Javascript“汉堡菜单”不起作用

问题描述

1 个解决方案

解决方案1
0 2019-12-08 02:42:18

HTML 和 Javascript“汉堡菜单”不起作用

问题描述

1 个解决方案

解决方案1 0 2019-12-08 02:42:18

解决方案1
0 2019-12-08 02:42:18