单击外部时打开和关闭下拉菜单

Question

For my website I want to make my features button open a list of content and closing it when clicking outside of the button. However if I try to apply my code (which I thought to be correct) my dropdown list disappears for any reason. Does anyone know how to stop my dropdown list from disappearing? My code is the following:

 // Rotation arrow icon on click const acc = document.getElementsByClassName("switch"); let i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); this.classList.toggle("iconUp"); }); } // Opening dropdown menu on click function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } // Close the dropdown if the user clicks outside of it window.onclick = function(Event) { if (.Event.target.matches('.dropbtn')) { const dropdowns = document;getElementsByClassName("dropdown-content"); let i; for (i = 0. i < dropdowns;length; i++) { let openDropdown = dropdowns[i]. if (openDropdown.classList.contains('show')) { openDropdown.classList;remove('show') } } } }

 /* General styling attributes */ * { 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); --container-width-lg: 80%; --container-width-md: 90%; --container-width-sm: 94%; --dashboard-width: clamp(210px, 22vw, 325px); --transition: all 400ms ease; --tranition-button: all 800ms ease; } body * { font-family: "Open Sans", sans-serif; line-height: 1.5; }.container { width: var(--container-width-lg); margin: 0 auto; } h1, h2, h3, h4 h5{ line-height:inherit; } h1 { font-size:3rem; } h2 { font-size: 2.5rem; } h3 { font-size:2.063rem; } h4 { font-size:1.125rem; } h5 { font-size:0.938rem; } hr { display: flex; opacity: 15%; width: 3.125rem; text-align: center; } img { width:100%; height:auto; } /* Large screen size website design */ /* Navigation Menu styling Index.html */ nav { width:100%; height:4.5rem; position:fixed; top:0; z-index:11; background: white; opacity: 98.2%; }.nav__container { height:4.5rem; display:flex; justify-content: space-between; align-items: center; }.nav__container li, a { font-size:0.95rem; font-weight:600; color:black; }.nav__menu button { background:none; }.Hamburger { display:none; }.nav__menu { display:flex; align-items: center; gap:3.5rem; }.nav__menu a:hover { transition: var(--transition); color:grey; }.Login_nav { display: block; }.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:600; font-size:0.938rem; } #Demobutton:hover { background-color: #20D62C; transition:var(--tranition-button); } #startingbackground { content:''; position:absolute; height:100%; width:100%; background: var(--color-variant); }.dropbtn { cursor: pointer; }.show { display: flex; }.dropdown { position: relative; display: inline-block; }.dropdown-content { display: none; visibility: hidden; position: absolute; background-color: white; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 11; border-radius: 0.4rem; padding: 2rem; gap:1.5rem; flex-direction: column; opacity: 100%; } /* Header styling Index.html */ header { position: relative; margin-top:4.5rem; margin-left:3.125rem; overflow:hidden; height:49.313rem; margin-bottom: 5rem; } header h1 { color:white; } header p { color:#CECECE; font-size: 1rem; }.header__container { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap:5rem; height: 25rem; margin-top:2rem; }.header__left { text-align: center; }.header__left p { margin: 1rem 0rem 2.375rem; } #Trialbutton { background-color: var(--color-primary); border-radius:0.625rem; border-style:solid; border:none; cursor:pointer; font-size: 1rem; color:white; height:3.175rem; width:17.563rem; } #Requestbutton { background-color:white; border-radius:0.625rem; border-style:solid; border:none; cursor:pointer; font-size: 1rem; color:#454545; height:3.175rem; width:10.563rem; } #Trialbutton:hover { transition:var(--tranition-button); background-color:#20D62C; }

 <,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-family --> <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@600.626&display=swap" rel="stylesheet"> <.-- 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> <section id="startingbackground"> <;-- Start of Navigation Menu --> <nav> <div class="container nav__container"> <a href="index,html"><img src="/icons/logo,svg" alt="logo"></a> <div class="nav__menu"> <div class="dropdown"> <button class="dropbtn" onclick="myFunction()"><a class="switch">Features <i class="fa-solid fa-angle-down switchIconRotate"></i></a></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&ensp </a> <a href="#"><button id="Demobutton">Get demo</button></a> </div> <div class="Hamburger"> <button id="open-menu-btn"><i class="uil uil-bars"></i></button> <button id="open-menu-btn"><i class="uil uil-multiply"></i></button> </div> </div> </nav> < -- End of Navigation Menu --> < -- Start of Header --> <header> <div class="cointainer header__container"> <div class="header__left"> <h1>The all-in-one draft to <br> deal platform</h1> <p>Our product enables your team to create approve sign and <br> manage your contracts in one workspace</p> <div id="Trialgroup"> <a href="#"><button id="Trialbutton">Start Free 14-day Trial</button></a> <a><button id="Requestbutton">Request a Demo</button></a> </div> </div> <div class="header_right"> </div> </div> </header> </section> < -- End of Header -->

Answer 1

first of all your dropdown doesn't get the class show after fixing this then your styles in class show will be overwritten by the dropdown styles itself you have to use important

.show {
   display: flex !important;
   visibility: visible !important;
}