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

Question

对于我的网站，我想让我的功能按钮打开一个内容列表，并在点击按钮外部时关闭它。然而，如果我尝试应用我的代码(我认为这是正确的(，我的下拉列表会因为任何原因而消失。有人知道如何阻止我的下拉列表消失吗？我的代码如下：

// 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-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">

<!-- 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> 
<div 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 switch" onclick="myFunction()">Features <i class="fa-solid fa-angle-down switchIconRotate"></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 id="Demobutton">Get demo</button></form>
</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="container 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 class="Trialgroup">
<form><button id="Trialbutton">Start Free 14-day Trial</button></form>
<form><button id="Requestbutton">Request a Demo</button></form>
</div>
</div>
<div class="header_right">
</div>
</div>
</header>
</div>

Answer 1

首先，在修复此问题后，您的下拉列表没有得到类显示，然后您在类显示中的样式将被您必须使用的下拉样式本身覆盖！重要

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