单击图标时菜单不显示

Question

对于我的网站，我希望我的图标为移动用户显示一个菜单栏。 我已经为它编写了一些 javascript 代码，但我无法让它正常工作。 我尝试创建一个名为“菜单”的元素并将图标按钮 class 分配给它。 之后，我为要显示的 div 做了一个简单的类列表切换。 当我这样做时，class 汉堡菜单（我想在单击按钮时显示 class）在按钮内显示为 class。 相反，我希望 class 自己出现，而不是在按钮 class 中。 有谁知道问题可能是什么并指出我正确的方向？

我的代码如下：

 const menu = document.querySelector(".hamburger button"); // Get dropdown menu when clicking on hamburger Icon menu.addEventListener("click", function() { Showdropdown(); }); // Showing dropdown content function Showdropdown() { menu.classList.toggle("hamburgermenu"); }

 /* General styling attributes */ html { -webkit-text-size-adjust: 100%; } * { margin:0; padding:0; border:0; outline:0; text-decoration:none; list-style:none; box-sizing: border-box; }:root { --color-primary: #4EC843; --color-secondary: #387CFF; --color-dashboard: purple; --color-hover: #20d62c; --color-variant: linear-gradient(30deg, #1565FF, #9FC0ff); --color-showcase: #FAFAFA; --color-withwithout: #6D6D6D; --container-width-lg: 85%; --container-width-md: 90%; --container-width-sm: 94%; --dashboard-width: clamp(210px, 22vw, 325px); --transition: all 200ms ease; --transition-hamburger: all 180ms ease; --tranition-button: all 800ms ease; } body * { font-family: "Open Sans", sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }.container { width: var(--container-width-sm); margin: 0 auto; } a { color:black; } h1, h2, h3, h4 h5{ line-height:inherit; } h1 { font-size:3rem; } h2 { font-size: 1.9rem; } h3 { font-size:1.363rem; } h4 { font-size:1.125rem; } h5 { font-size:0.938rem; }.m1 { margin-left:0.5rem; }.h-6 { height:1.5rem; }.w-6 { width:1.5rem; } svg { display:flex; vertical-align: middle; } hr { display: flex; opacity: 15%; width: 3.125rem; text-align: center; } img { width:100%; height:auto; } section { display:block; }.relative { position: relative; }.fixed { position: fixed; }.transition { transition: all 300ms ease; } /* Navigation Menu */ nav { width:100%; height:4.5rem; position:fixed; top:0; z-index:11; background: white; }.nav_container { height:4.5rem; display:flex; justify-content: space-between; align-items: center; }.nav_menu { display:flex; align-items: center; gap:3.5rem; font-size: 0.95rem; font-weight:500; }.nav_menu button { background:none; font-size:0.95rem; font-weight: 500; }.nav_menu button:hover { color:grey; transition: var(--transition); }.nav_menu a:hover { transition: var(--transition); color: grey; }.login_nav { display: flex; align-items: center; gap:1rem; font-weight:500; font-size: 0.95rem; }.login_nav a { color:black; }.login_nav a:hover { transition: var(--transition); color:grey; }.Login:hover { transition: var(--transition); color:grey; }.switchIconRotate { transform-origin: center; transition: 0.2s; }.fa-angle-down { color:#6161F2 }.iconUp.fa-solid { transform-origin: center; transform: rotate(180deg); }.demobutton { cursor:pointer; background-color: var(--color-primary); border-radius:2.125rem; border:none; color: white; width:8.125rem; height:2.188rem; font-weight:500; font-size:0.918rem; }.demobutton:hover { background-color: #20D62C; transition:var(--tranition-button); }.startingbackground { content:''; position:relative; margin-top:4.5rem; width:100%; height:100vh; background: var(--color-variant); border-radius: 0% 0% 75% 0%; overflow: hidden; }.startingbackground3 { display: flex; position: relative; margin-top: 2rem; }.dropbtn { cursor: pointer; }.dropdown { float: left; overflow: hidden; }.dropdown-content { position: absolute; background-color: white; border-radius: 0.4rem; padding: 2rem; gap:1.5rem; opacity: 100%; display: none; }.dropdown-content2 { display:none; top:4.5rem; right:20rem; width:25rem; position:absolute; padding:0.5rem; gap:1.5rem; opacity: 100%; border-radius:0.4rem; background-color:white; margin: 0 auto 0 auto; transition: 300ms; }.show { display:flex; flex-direction: column; }.hamburger { display:none; }.hamburger a { font-family: inherit; }.hamburger a:hover { transition: var(--transition); color: grey; }.hamburger_button { display: flex; align-items: center; justify-content: center; cursor: pointer; background-color: white; border-radius: 0.375rem; width:2rem; height:2rem; }.hamburger_button:hover { transition: var(--transition-hamburger); background-color:rgb(217, 217, 217); }.hamburgermenu { display: none; width:10rem; height:10rem; background-color:rgb(255 255 255); margin-top: 15rem; border-radius:5rem; } @media screen and (max-width: 890px) {.hamburger { display:block; }.nav_menu { display:none; }.login_nav { display:none; }.hamburger { display:block; }.nav_container { padding-left: 0.3rem; margin-left: auto; } }

 <,DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>DraftFlex</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width. initial-scale=1 maximum-scale=1"> <link rel="stylesheet" href="styles:css"> <.-- Font-families --> <link rel="preconnect" href="https.//fonts:googleapis.com"> <link rel="preconnect" href="https.//fonts:gstatic.com" crossorigin> <link href="https.//fonts?googleapis:com/css2;family=Open+Sans;wght@400:500.600&display=swap" rel="stylesheet"> <.-- Animations --> <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script> <.-- Fontawesome Icon --> <script src="https://kit.fontawesome.com/98d94e81b6.js" crossorigin="anonymous"></script> <.-- Iconscout CDN --> <link rel="stylesheet" href="https.//unicons.iconscout.com/release/v4.0.0/css/line:css"> </head> <body> <.-- Navigation Menu --> <header> <nav> <div class="container nav_container"> <a href="index.html" class="nav_menu-logo"><img src="/icons/logo.svg" alt="logo"></a> <div class="nav_menu"> <div class="dropdown"> <button class="dropbtn switch" onclick="myFunction()"><span>Features</span><i class="fa-solid fa-angle-down switchIconRotate m1"></i></button> <div class="dropdown-content" id="myDropdown"> <a href="#">Link1</a> <a href="#">Link2</a> <a href="#">Link3</a> </div> </div> <a href="Pricing.html">Pricing</a> <a href="Contact_Us.html">Contact Us</a> </div> <div class="login_nav"> <a href="#" class="login">Login</a> <form><button class="demobutton">Get demo</button></form> </div> <div class="hamburger"> <button class="hamburger_button"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" class="h-6 w-6 "><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg> </button> </div> </div> <div class="hamburgermenu"> </div> </nav> </header>

Answer 1

`.hamburgermenu {
    display:block;
    width:10rem;
    height:10rem;
    background-color:rgb(255 255 255);
    margin-top: 15rem;
    border-radius:5rem;
}
.hamburgermenu {
    display: none;
}

删除具有显示的附加 class 汉堡菜单：无； 财产。 切勿在 CSS 中重复。