不显示响应式导航栏（汉堡菜单）

Question

I am trying to make the so-called "Hambuger menu" which appears very well but when I click it nothing happens.我正在尝试制作看起来非常好的所谓的“汉堡菜单”，但是当我点击它时，什么也没有发生。

I have an event listener to listen for any click on that button and then according it would toggle the class to show or hide the ul elements.我有一个事件监听器来监听对该按钮的任何点击，然后根据它切换 class 以显示或隐藏 ul 元素。

I can't find the mistake myself.我自己找不到错误。 Is there even a simpler way?还有更简单的方法吗？

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

 /* Basic/Boiler css */ *{ box-sizing: border-box; } body{ margin: 0; padding: 0; } /* nav bar */.navbar{ display: flex; justify-content: space-between; align-items: center; background: #000; color: white; }.navbar-logo{ width: 10rem; height: 3rem; margin: 0.5rem; border-radius: 4px; }.navbar-links ul{ margin: 0; padding: 0; display: flex; }.navbar-links li{ list-style: none; transition: font-size 0.5s ease-out 100ms; }.navbar-links li a{ text-decoration: none; color: white; padding-right: 1rem; display: block; }.navbar-links li:hover{ font-size: 1.4rem; } /* Responsive Navbar */.toggle-button{ 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%; background: white; border-radius: 10px; } @media (max-width: 650px){.toggle-button{ display: flex; }.navbar-links{ width: 100%; }.navbar-links ul{ flex-direction: column; width: 100%; display: none; }.navbar-links li a{ padding: 10px; }.navbar-links li{ text-align: center; }.navbar{ flex-direction: column; align-items: flex-start; }.navbar-links.active{ display: flex; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="icon" href="/logo.png" type="image/jpg"> <link rel="stylesheet" href="style.css"> </head> <body> <nav class="navbar"> <div class="brand-titel"><img class="navbar-logo" src="/logo.png" alt="logo"></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="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> </ul> </div> </nav> <script src="front.js"></script> </body> </html>

I repeat Again The hamburger appers alright but when i click it it dose not respond我再重复一遍汉堡包很好但是当我点击它时它没有响应

Answer 1

You have set the style for the ul as display: none .您已将ul的样式设置为display: none 。 display: none needs to be overridden when the active class is applied. display: none当应用active的 class 时，不需要覆盖 none。

Add this rule ul {display: flex} at the end of the media query, your code should look something like this:在媒体查询的末尾添加这条规则ul {display: flex} ，你的代码应该是这样的：

@media (max-width: 650px){
  ...
  .navbar-links.active ul{
    display: flex
  }
}

Answer 2

You forgot to add class "active" in your CSS file.您忘记在 CSS 文件中添加 class “活动”。 Also, your navbar-links should have "display:none;"此外，您的导航栏链接应该有“display:none;” instead of its list.而不是它的列表。

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

 /* Basic/Boiler css */ *{ box-sizing: border-box; } body{ margin: 0; padding: 0; } /* nav bar */.navbar{ display: flex; justify-content: space-between; align-items: center; background: #000; color: white; }.navbar-logo{ width: 10rem; height: 3rem; margin: 0.5rem; border-radius: 4px; }.navbar-links ul{ margin: 0; padding: 0; display: flex; }.navbar-links li{ list-style: none; transition: font-size 0.5s ease-out 100ms; }.navbar-links li a{ text-decoration: none; color: white; padding-right: 1rem; display: block; }.navbar-links li:hover{ font-size: 1.4rem; } /* Responsive Navbar */.toggle-button{ 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%; background: white; border-radius: 10px; } @media (max-width: 650px){.toggle-button{ display: flex; }.navbar-links{ width: 100%; display:none; }.active { display: block; padding: 25px; color: white; font-size: 25px; box-sizing: border-box; }.navbar-links ul{ flex-direction: column; width: 100%; }.navbar-links li a{ padding: 10px; }.navbar-links li{ text-align: center; }.navbar{ flex-direction: column; align-items: flex-start; }.navbar-links.active{ display: flex; } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="icon" href="/logo.png" type="image/jpg"> <link rel="stylesheet" href="style.css"> </head> <body> <nav class="navbar"> <div class="brand-titel"><img class="navbar-logo" src="/logo.png" alt="logo"></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="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> </ul> </div> </nav> <script src="front.js"></script> </body> </html>

不显示响应式导航栏（汉堡菜单）

问题描述

2 个解决方案

解决方案1
1 2022-09-04 20:22:06

解决方案2
1 2022-09-04 20:52:54

不显示响应式导航栏（汉堡菜单）

问题描述

2 个解决方案

解决方案1 1 2022-09-04 20:22:06

解决方案2 1 2022-09-04 20:52:54

解决方案1
1 2022-09-04 20:22:06

解决方案2
1 2022-09-04 20:52:54