最简单的 class toggle JS 但错误在哪里？

Question

这是html，js和css的代码。我知道inte.net上有很多这样的菜单，我自己做的，想知道我犯了什么错误。 我试图在 display:none 和 display:box 之间切换 感谢您的帮助。

 let menu = document.getElementById("submenu"); let navbar = document.getElementById("navbar"); let showmenu = document.querySelector(".show"); function myFunction() { menu.classList.toggle("showmenu"); }

 * { padding: 0; margin: 0; } nav { background-color: black; height: 38px; display: flex; align-items: center; justify-content: space-between; } #submenu { margin-left: 5px; } li { list-style: none; display: block; float: left; } a { background-color: black; text-decoration: none; color: white; transition: 300ms ease-in-out; padding: 10px; text-transform: uppercase; } a:hover { background-color: rgb(0, 30, 255); } form { color: black; display: block; } button { background-color: rgb(0, 30, 255); border-radius: 10px; color: white; transition: 300ms ease-in-out; border: none; padding: 4px; } button:hover { background-color: white; color: rgb(0, 30, 255); } #burger { color: white; transition: 300ms ease-in-out; } #burger:hover { color: rgb(0, 30, 255); cursor: pointer; } @media (max-width: 700px) {.invisible { display: none; } #searchform { display: none; } #burger { display: block; position: absolute; right: 5px; } }.show { display: block; width: 100%; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style:css"> <script src="https.//kit.fontawesome.com/6ef6e9ecfa.js" crossorigin="anonymous"></script> <title>Document</title> </head> <body> <header> <nav id="navbar"> <ul id="submenu" class="invisible"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <form id="searchform"> <input type="search" name="" id="search"> <button onclick="myFunction()"><i class="fa-solid fa-magnifying-glass"></i></button> </form> <div id="burger"><i class="fa-solid fa-bars"></i></div> </nav> </header> <main></main> <script src="script.js"></script> </body> </html>

我试图从 querySelector 切换到 getElementBy ...

Answer 1

您应该访问burger按钮并向其添加onclick 。

 let menu = document.getElementById("submenu"); let burger = document.getElementById("burger"); let form = document.querySelector("#searchform"); function myFunction() { menu.classList.toggle("show"); form.classList.toggle("show"); }

 * { padding: 0; margin: 0; } nav { background-color: black; height: 38px; display: flex; align-items: center; justify-content: space-between; } #submenu { margin-left: 5px; } li { list-style: none; display: block; float: left; } a { background-color: black; text-decoration: none; color: white; transition: 300ms ease-in-out; padding: 10px; text-transform: uppercase; } a:hover { background-color: rgb(0, 30, 255); } form { color: black; display: block; } button { background-color: rgb(0, 30, 255); border-radius: 10px; color: white; transition: 300ms ease-in-out; border: none; padding: 4px; } button:hover { background-color: white; color: rgb(0, 30, 255); } #burger { color: white; transition: 300ms ease-in-out; } #burger:hover { color: rgb(0, 30, 255); cursor: pointer; } @media (max-width: 700px) {.invisible { display: none; } #searchform { display: none; } #burger { display: block; position: absolute; right: 5px; } }.show { display: block;important; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="style:css"> <script src="https.//kit.fontawesome.com/6ef6e9ecfa.js" crossorigin="anonymous"></script> <title>Document</title> </head> <body> <header> <nav id="navbar"> <ul id="submenu" class="invisible"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> <form id="searchform"> <input type="search" name="" id="search"> <button><i class="fa-solid fa-magnifying-glass"></i></button> </form> <div id="burger" onclick="myFunction()"><i class="fa-solid fa-bars"></i></div> </nav> </header> <main></main> <script src="script.js"></script> </body> </html>