单击外部时，我无法隐藏导航下拉列表

Question

我有一个问题，当我在下拉菜单外单击时无法删除类。这是我的代码笔：https://codepen.io/nguyenchinhhiep/pen/oNvdzOB

var getNavItem = document.querySelectorAll('.nav-item');
getNavItem.forEach(item => {
item.addEventListener('click', function(e) {
var siblings = getSiblings(this);
siblings.forEach(item => {
item.classList.remove('active');
})
this.classList.toggle('active');
// Remove when click outside
document.addEventListener("click", function(event) {
if(event.target.tagName == 'BODY') {
this.classList.remove('active');
}
})
});
});
// Get Siblings
var getSiblings = function (elem) {
var siblings = [];
var sibling = elem.parentNode.firstChild;
for (; sibling; sibling = sibling.nextSibling) {
if (sibling.nodeType !== 1 || sibling === elem) continue;
siblings.push(sibling);
}
return siblings;
};
var elem = document.querySelector('#some-element');

Answer 1

您可以在外部点击时删除"活动">类：

window.addEventListener('click', function(e) {
var els = document.getElementsByClassName('dropdown');
for (var i = 0; i < els.length; i++) {
if (els[i].contains(e.target)) {
// Clicked on dropdown
} else {
// Clicked outside the dropdown
els[i].classList.remove('active');
}
}
});

// Navigation mobile
var getNavbar = document.querySelector('nav');
var getNavbarToggler = document.querySelector('.navbar-toggler');
var getNavbarNav = document.querySelector('.navbar-nav');
getNavbarToggler.addEventListener('click', toggleNavbar);
function toggleNavbar() {
getNavbarToggler.classList.toggle('active');
getNavbarNav.classList.toggle('active');
}
// Dropdown Menu
var getNavItem = document.querySelectorAll('.nav-item');
getNavItem.forEach(item => {
item.addEventListener('click', function(e) {
var siblings = getSiblings(this);
siblings.forEach(item => {
item.classList.remove('active');
})
this.classList.toggle('active');
});
});
// Get Siblings
var getSiblings = function(elem) {
var siblings = [];
var sibling = elem.parentNode.firstChild;
for (; sibling; sibling = sibling.nextSibling) {
if (sibling.nodeType !== 1 || sibling === elem) continue;
siblings.push(sibling);
}
return siblings;
};
var elem = document.querySelector('#some-element');
// code for hiding dropdown
window.addEventListener('click', function(e) {
var els = document.getElementsByClassName('dropdown');
for (var i = 0; i < els.length; i++) {
if (els[i].contains(e.target)) {
// Clicked on dropdown
} else {
// Clicked outside the dropdown
els[i].classList.remove('active');
}
}
});

/* Global Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow-x: hidden;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.container {
max-width: 1170px;
margin: 0 auto;
}
/* Navigation */
nav {
background: #333;
transition: all ease .4s;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
position: relative;
}
.navbar-brand {
display: block;
color: #fff;
font-size: 30px;
}
.navbar-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-link,
.dropdown-item {
display: block;
color: #fff;
padding: 20px 16px;
text-align: center;
cursor: pointer;
}
.nav-link:hover,
.dropdown-item:hover {
background: #111;
}
.nav-link.active,
.nav-link.active:hover {
background-color: #4CAF50;
}
.dropdown-menu {
display: none;
}
.nav-item.active .dropdown-menu {
display: block;
}
.nav-link i {
transition: all ease .4s;
}
.nav-item.active i {
transform: rotate(180deg);
}
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
background: #333;
left: 0;
width: 100%;
text-align: center;
}
.arrow-icon {
width: 0;
height: 0;
border-style: solid;
border-width: 6px 6px 0 6px;
border-color: #fff transparent transparent transparent;
position: absolute;
}
.navbar-toggler {
display: none;
cursor: pointer;
position: relative;
width: 30px;
height: 30px;
}
.navbar-toggler .navbar-toggler-icon {
width: 100%;
height: 3px;
margin: 5px 0;
background: #fff;
display: block;
transition: all ease .3s;
}
.sticky-nav {
position: fixed;
top: 0;
width: 100%;
transition: all ease .4s;
}
@media (max-width: 700px) {
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.dropdown-menu {
position: relative;
background: #444;
}
.dropdown-item {
text-align: left;
padding-left: 50px;
}
.navbar-brand {
padding: 10px 0;
}
.navbar-toggler {
display: block;
transition: all ease .3s;
}
.navbar-toggler.active {
transform: rotate(225deg);
}
.navbar-toggler.active .navbar-toggler-icon {
position: absolute;
top: 30%;
transition: all ease .3s;
}
.navbar-toggler.active .navbar-toggler-icon:first-child {
transform: rotate(-3deg);
}
.navbar-toggler.active .navbar-toggler-icon:nth-child(2) {
opacity: 0;
}
.navbar-toggler.active .navbar-toggler-icon:last-child {
transform: rotate(90deg);
}
.navbar-nav {
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 0;
display: block;
overflow: hidden;
background: #333;
transition: all ease .4s;
}
.navbar-nav.active {
height: 100vh;
overflow: auto;
}
.nav-link {
text-align: left;
}
}

<nav>
<div class="container navbar">
<a href="#" class="navbar-brand">Navigation</a>
<div class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</div>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link active">Home</a>
</li>
<li class="nav-item dropdown" id="m1">
<a class="nav-link">Dropdown 1
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Item 1</a>
<a href="#" class="dropdown-item">Item 2</a>
<a href="#" class="dropdown-item">Item 3</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link">Dropdown 2
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Item 1</a>
<a href="#" class="dropdown-item">Item 2</a>
<a href="#" class="dropdown-item">Item 3</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
</div>
</nav>

Answer 2

以下代码将导致main-div 中的每次单击关闭下拉列表：

document.getElementById("main").addEventListener("click", function(event) {
getNavItem.forEach(item => {
item.classList.remove('active')
})
})

只需将其放在上面的代码下方并删除它

// Remove when click outside
document.addEventListener("click", function(event) {
if(event.target.tagName == 'BODY') {
this.classList.remove('active');
}
})

从您的代码中。