为什么我的汉堡菜单下拉菜单不能使用 javascript？
[英]Why won't my burger menu drop down work using javascript?
问题描述
Okay, so I am trying to build a navbar for my website.
好的，所以我正在尝试为我的网站构建一个导航栏。 But somehow, my burger-menu won't drop down when I click on it.但不知何故，当我点击它时，我的汉堡菜单不会下拉。 I am pretty sure it should be an easy fix, but for some reason I just can't find what I did wrong.我很确定这应该是一个简单的修复，但由于某种原因，我找不到我做错了什么。 Here is the file.这是文件。
I feel like either the HTML file is not connecting to the JS file, or something is wrong with my JS file.我觉得要么 HTML 文件没有连接到 JS 文件，要么我的 JS 文件有问题。 Because when I add the class ".mobilenav-active" manually via inspect in the browser, the drop down menu manages to appear.因为当我通过浏览器中的检查手动添加类“.mobilenav-active”时，下拉菜单设法出现。 But when I try to do it via JS it just doesn't work.但是当我尝试通过 JS 来做它时，它就行不通了。
const burgerMenu = document.querySelector(".burger"); const nav = document.querySelector(".navlinks"); burgerMenu.addEventListener("click", function () { nav.classList.toggle(".mobilenav-active"); });
@import url("https://fonts.googleapis.com/css2?family=Montaga&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Montaga", serif; background: #2f3e46; } /* NAVBAR */ #navbutton, #logo, .navlist, .nav-a { font-family: "Montaga", serif; color: #edf0f1; font-weight: 500; font-size: 18px; text-decoration: none; } header { display: flex; justify-content: space-between; align-items: center; padding: 30px 10%; background: #354f52; } #logo { cursor: pointer; font-family: "Oswald", sans-serif; font-size: 24px; text-transform: uppercase; letter-spacing: 0.2px; } #logobutton { text-decoration: none; } .navlinks { list-style: none; } .navlinks li { display: inline-block; padding: 0 20px; } .navlinks li a { transition: all 0.5s; } .navlinks li a:hover { color: #354f52; background: #edf0f1; padding: 10px 20px; } #navbutton { padding: 9px 25px; background-color: rgba(82, 121, 111, 1); border: none; border-radius: 50px; cursor: pointer; transition: all 0.5s; } #navbutton:hover { background-color: rgba(82, 121, 111, 0.6); } .burger .line { width: 25px; height: 3px; background: #edf0f1; margin: 5px; border-radius: 3px; } .burger { display: none; } /*Navbar's Responsive Breakpoints */ /* Tablet */ @media screen and (max-width: 768px) { header { padding: 30px 3%; } .navlinks li { padding: 0px 10px; } .navlinks li a:hover { color: #354f52; background: #edf0f1; padding: 5px 5px; } } /* Mobile */ @media screen and (max-width: 576px) { body { overflow-x: hidden; } .navlinks { position: absolute; height: calc(100vh - 100.4px); right: 0; width: 100%; top: 100.4px; background: #354f52; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 100px 0px; opacity: 80%; transform: translateX(100%); transition: all 0.5 ease-in; } .navlinks li a:hover { color: #354f52; background: #edf0f1; padding: 10px 20px; } /* .navlist { opacity: 0; } */ .burger { display: block; cursor: pointer; } .navlinks.mobilenav-active { transform: translateX(0%); } }
<!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" /> <link rel="stylesheet" href="./css/style.css" /> <title>Brian Wyann</title> </head> <body> <header> <a id="logobutton" href="index.html"> <h4 id="logo">BrianWyann</h4> </a> <nav> <ul class="navlinks"> <li class="navlist"><a class="nav-a" href="./index.html">Home</a></li> <li class="navlist"> <a class="nav-a" href="./about.html">About Me</a> </li> <li class="navlist"> <a class="nav-a" href="./project.html">Projects</a> </li> </ul> <div class="burger"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> </nav> <a href="./contact.html" id="contact" ><button id="navbutton">Contacts</button></a > </header> <script type="text/javascript" src="main.js"></script> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2021-07-01 07:47:23
When using classList you don't need to add a dot before class name使用classList 时，您不需要在类名前添加点
const burgerMenu = document.querySelector(".burger");
const nav = document.querySelector(".navlinks");
burgerMenu.addEventListener("click", function () {
nav.classList.toggle("mobilenav-active");
});
classList expects a class, by adding a dot it adds the dot in the class name as well classList需要一个类，通过添加一个点，它也会在类名中添加点
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.