单击图标时菜单不显示

Question

For my website I want my icon to display a menu bar for mobile users. I have written some javascript code for it, but I can't get it to work properly. I tried creating an element called "Menu" and assigned the icon button class to it. Afterwards I just made a simple classlist toggle for the div I want to show up. When I do this, the class hamburgermenu (the class i want to show when clicking on the button) shows up as a class within the button. To the contrary I want the class to show up on his own without being in the button class. Does anyone know what the problem might be and pointing me in the right direction?

My code is beneath:

 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;
}

Remove the additional class hamburgermenu that has a display: none; property. Never make duplicates in CSS.