HTML和Javascript“；汉堡包菜单“；不起作用_Javascript_Html_Css_Navbar_Hamburger Menu

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

javascript html css

HTML和Javascript“；汉堡包菜单“；不起作用,javascript,html,css,navbar,hamburger-menu,Javascript,Html,Css,Navbar,Hamburger Menu,我想在我的html文件中使用一个.js脚本，但不幸的是，我的脚本无法正常工作：（.我为我的网站构建了一个响应性导航栏，在小屏幕上有一个“汉堡包菜单”。我设法在较小的屏幕上显示“汉堡包菜单”，但如果我点击它，我的导航栏链接就不会显示。下面是我的html代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=

我想在我的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>

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

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

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

感谢您提供的大量代码，但我想在您的帮助下找到错误，因此我发布了我所有的代码。谢谢您，这将是

切换按钮

而不是

切换按钮

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

const-toggleButton=document.getElementsByClassName（'toggle-button'）[0]；
const navbarLinks=document.getElementsByClassName（'navbar-links'）[0]；
console.log（切换按钮）；
toggleButton.addEventListener（'单击'，（）=>{
navbarLinks.classList.toggle（'active'）
})

正文{
保证金：0；
填充：0；
字体系列：无衬线；
}
标题{
背景色：白色；
填充顶部：10px；
最小高度：70px；
边框底部：黑色3px实心；
对齐项目：居中；
}
navbar先生{
宽度：80%；
保证金：自动；
溢出：隐藏；
对齐项目：居中；
}
.品牌{
浮动：左；
保证金：0；
填充：0；
}
.导航栏链接{
边缘顶部：25px；
填充：0；
浮动：对；
}
.导航栏链接{
保证金：0；
填充：0；
显示器：flex；
列表样式：无；
}
.navbar链接ul li a{
填充：25px；
颜色：黑色；
文字装饰：无；
文本转换：大写；
字号：18px；
字号：500；
}
.navbar链接a:悬停{
颜色：#ffbf00；
}
.切换按钮{
边缘顶部：20px；
位置：绝对位置；
顶部：.75rem；
右：1rem；
显示：无；
弯曲方向：立柱；
证明内容：之间的空间；
宽度：30px；
高度：21px；
}
.切换按钮.栏{
高度：3倍；
宽度：100%；
颜色：黑色；
背景色：黑色；
边界半径：10px；
}
@介质（最大宽度：1050px）{
.切换按钮{
显示器：flex；
}
.导航栏链接{
显示：无；
宽度：100%；
}
navbar先生{
弯曲方向：立柱；
调整项目：灵活启动；
}
.导航栏链接{
宽度：100%；
弯曲方向：立柱；
}
.navbar链接李{
文本对齐：居中；
}
.导航栏链接李a{
填充：.5rem1rem；
}
.navbar-links.active{
显示器：flex；
}
}


标题

它将是

切换按钮

而不是

切换按钮

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

const-toggleButton=document.getElementsByClassName（'toggle-button'）[0]；
const navbarLinks=document.getElementsByClassName（'navbar-links'）[0]；
console.log（切换按钮）；
toggleButton.addEventListener（'单击'，（）=>{
navbarLinks.classList.toggle（'active'）
})

正文{
保证金：0；
填充：0；
字体系列：无衬线；
}
标题{
背景色：白色；
填充顶部：10px；
最小高度：70px；
边框底部：黑色3px实心；
对齐项目：居中；
}
navbar先生{
宽度：80%；
保证金：自动；
溢出：隐藏；
对齐项目：居中；
}
.品牌{
浮动：左；
保证金：0；
填充：0；
}
.导航栏链接{
边缘顶部：25px；
填充：0；
浮动：对；
}
.导航栏链接{
保证金：0；
填充：0；
显示器：flex；
列表样式：无；
}
.navbar链接ul li a{
填充：25px；
颜色：黑色；
文字装饰：无；
文本转换：大写；
字号：18px；
字号：500；
}
.navbar链接a:悬停{
颜色：#ffbf00；
}
.切换按钮{
边缘顶部：20px；
位置：绝对位置；
顶部：.75rem；
右：1rem；
显示：无；
弯曲方向：立柱；
证明内容：之间的空间；
宽度：30px；
高度：21px；
}
.切换按钮.栏{
高度：3倍；
宽度：100%；
颜色：黑色；
背景色：黑色；
边界半径：10px；
}
@介质（最大宽度：1050px）{
.切换按钮{
显示器：flex；
}
.导航栏链接{
显示：无；
宽度：100%；
}
navbar先生{
弯曲方向：立柱；
调整项目：灵活启动；
}
.导航栏链接{
宽度：100%；
弯曲方向：立柱；
}
.navbar链接李{
文本对齐：居中；
}
.导航栏链接李a{
填充：.5rem1rem；
}
.navbar-links.active{
显示器：flex；
}
}


标题

应该是

document.getElementsByClassName（'toggle-button'）

应该是

document.getElementsByClassName（'toggle-button'）

谢谢。但是由于某些原因，它在我的浏览器中不起作用（无论我使用哪种浏览器）。如果我在这里使用“运行代码片段”按钮它以我想要的方式工作。你知道为什么这在我的浏览器中不起作用吗？@MaximilianMüller它将是

切换按钮

，而不是

切换按钮

，你更新了吗？是的，我当然更新了。我得到了这个错误：“Uncaught TypeError:无法读取script.js:4中未定义的属性'addEventListener'谢谢。但由于某些原因，它在我的浏览器中不起作用（无论我使用哪种浏览器）。如果我在这里用“运行代码段”运行它按钮它以我想要的方式工作。你知道为什么这在我的浏览器中不起作用吗？@MaximilianMüller它将是

切换按钮

，而不是

切换按钮

，你更新了吗？是的，我当然更新了。我得到了这个错误：“Uncaught TypeError:无法读取script.js:4中未定义的属性'addEventListener'