单击一个下拉菜单并关闭所有其他下拉菜单(vanilla JavaScript)

Question

嗨，我是vanilla JavaScript的新手，并试图很好地理解它。我创建了一个多下拉菜单导航，其中菜单由单击按钮时的单击事件触发，具有块显示属性的.showCSS 类被添加到下拉菜单中。我遇到的问题是，当我打开一个菜单并单击另一个下拉菜单按钮时，我希望关闭当前/所有其他菜单。我不确定我将如何实现这一目标。非常感谢任何帮助，谢谢。

这是JS：

(function() {
var dropBtns = document.querySelectorAll('.dropdown');
dropBtns.forEach(function(btn) {
btn.addEventListener('click', function(e) {
var dropContent = btn.querySelector('.dropMenu');
e.preventDefault();
if (!dropContent.classList.contains('show')) {
dropContent.classList.add('show');
} else {
dropContent.classList.remove('show');
}
e.stopPropagation();
});

});
//   close menus when clicking outside of them
window.addEventListener('click', function(event) {
if (event.target != dropBtns) {
openMenus = document.querySelectorAll('.dropMenu');
openMenus.forEach(function(menus) {
menus.classList.remove('show');
});
}
});
})();

这是 CSS：

.room-sort {
background: #434A54;
margin: 0;
padding: 0;
text-align: center;
}
.room-sort-menu ul {
margin: 0;
padding: 0;
}
span.sort {
margin-right: 30px;
color: #fff;
font-weight: 500;
}
.sort-mobile {
display: none;
}
.room-sort-menu>li {
display: inline-block;
color: #fff;
}
.room-sort-menu>li>a {
display: inline-block;
padding: 16px 30px;
margin: 0;
font-size: 0.8em;
color: #fff;
text-decoration: none;
}
.room-sort-menu>li>a:hover,
.room-sort-menu>li>a:focus {
background: #2e333a;
}
.dropdown {
position: relative;
}
.dropMenu {
position: absolute;
display: none;
top: 46px;
left: 0px;
border: 1px solid color;
width: 109px;
background: #CB242D;
font-size: 0.8em;
z-index: 1;
}
.show {
display: block;
}
.room-sort-menu li:last-of-type ul.dropMenu {
width: 166px;
}
.dropMenu li a {
display: block;
padding: 16px 20px;
color: #fff;
text-decoration: none;
}
.dropMenu li a:hover {
background: #a0080d;
}

这是 HTML：

<div class="room-sort">
<ul class="room-sort-menu">
<span class="sort">Sort by :</span>
<li class="dropdown"><a class="dropBtn" href="#">Price <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li><a href="#">Price (hi to low)</a></li>
<li><a href="#">Price (low to hi)</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropBtn" href="#">Stars <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li><a href="#">Stars (hi to low)</a></li>
<li><a href="#">Stars (low to hi)</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropBtn" href="#">Review score <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li><a href="#">Score (hi to low)</a></li>
<li><a href="#">Score (low to hi)</a></li>
</ul>
</li>
</ul>
</div>

Answer 1

你快到了，只是移动了一下代码，它就可以按预期工作。

(function() {
var dropBtns = document.querySelectorAll('.dropdown');
function closeOpenItems() {
openMenus = document.querySelectorAll('.dropMenu');
openMenus.forEach(function(menus) {
menus.classList.remove('show');
});  
}
dropBtns.forEach(function(btn) {
btn.addEventListener('click', function(e) {
var 
dropContent = btn.querySelector('.dropMenu'),
shouldOpen = !dropContent.classList.contains('show');
e.preventDefault();
// First close all open items.
closeOpenItems();
// Check if the clicked item should be opened. It is already closed at this point so no further action is required if it should be closed.
if (shouldOpen) {
// Open the clicked item.
dropContent.classList.add('show');      
}
e.stopPropagation();
});
});
//   close menus when clicking outside of them
window.addEventListener('click', function(event) {
if (event.target != dropBtns) {
// Moved the code here to its own function.
closeOpenItems();
}
});
})();

.room-sort {
background: #434A54;
margin: 0;
padding: 0;
text-align: center;
}
.room-sort-menu ul {
margin: 0;
padding: 0;
}
span.sort {
margin-right: 30px;
color: #fff;
font-weight: 500;
}
.sort-mobile {
display: none;
}
.room-sort-menu>li {
display: inline-block;
color: #fff;
}
.room-sort-menu>li>a {
display: inline-block;
padding: 16px 30px;
margin: 0;
font-size: 0.8em;
color: #fff;
text-decoration: none;
}
.room-sort-menu>li>a:hover,
.room-sort-menu>li>a:focus {
background: #2e333a;
}
.dropdown {
position: relative;
}
.dropMenu {
position: absolute;
display: none;
top: 46px;
left: 0px;
border: 1px solid color;
width: 109px;
background: #CB242D;
font-size: 0.8em;
z-index: 1;
}
.show {
display: block;
}
.room-sort-menu li:last-of-type ul.dropMenu {
width: 166px;
}
.dropMenu li a {
display: block;
padding: 16px 20px;
color: #fff;
text-decoration: none;
}
.dropMenu li a:hover {
background: #a0080d;
}

<div class="room-sort">
<ul class="room-sort-menu">
<span class="sort">Sort by :</span>
<li class="dropdown"><a class="dropBtn" href="#">Price <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li><a href="#">Price (hi to low)</a></li>
<li><a href="#">Price (low to hi)</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropBtn" href="#">Stars <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li><a href="#">Stars (hi to low)</a></li>
<li><a href="#">Stars (low to hi)</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropBtn" href="#">Review score <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li><a href="#">Score (hi to low)</a></li>
<li><a href="#">Score (low to hi)</a></li>
</ul>
</li>
</ul>
</div>

Answer 2

当我点击价格(从高到低)时，没有工作

(function() {
var dropBtns = document.querySelectorAll('.dropdown');
function closeOpenItems() {
openMenus = document.querySelectorAll('.dropMenu');
openMenus.forEach(function(menus) {
menus.classList.remove('show');
});  
}
dropBtns.forEach(function(btn) {
btn.addEventListener('click', function(e) {
var 
dropContent = btn.querySelector('.dropMenu'),
shouldOpen = !dropContent.classList.contains('show');
e.preventDefault();
// First close all open items.
closeOpenItems();
// Check if the clicked item should be opened. It is already closed at this point so no further action is required if it should be closed.
if (shouldOpen) {
// Open the clicked item.
dropContent.classList.add('show');      
}
e.stopPropagation();
});

});
//   close menus when clicking outside of them
window.addEventListener('click', function(event) {
if (event.target != dropBtns) {
// Moved the code here to its own function.
closeOpenItems();
}
});
})();

.room-sort {
background: #434A54;
margin: 0;
padding: 0;
text-align: center;
}
.room-sort-menu ul {
margin: 0;
padding: 0;
}
span.sort {
margin-right: 30px;
color: #fff;
font-weight: 500;
}
.sort-mobile {
display: none;
}
.room-sort-menu>li {
display: inline-block;
color: #fff;
}
.room-sort-menu>li>a {
display: inline-block;
padding: 16px 30px;
margin: 0;
font-size: 0.8em;
color: #fff;
text-decoration: none;
}
.room-sort-menu>li>a:hover,
.room-sort-menu>li>a:focus {
background: #2e333a;
}
.dropdown {
position: relative;
}
.dropMenu {
position: absolute;
display: none;
top: 46px;
left: 0px;
border: 1px solid color;
width: 109px;
background: #CB242D;
font-size: 0.8em;
z-index: 1;
}
.show {
display: block;
}
.room-sort-menu li:last-of-type ul.dropMenu {
width: 166px;
}
.dropMenu li a {
display: block;
padding: 16px 20px;
color: #fff;
text-decoration: none;
}
.dropMenu li a:hover {
background: #a0080d;
}

<div class="room-sort">
<ul class="room-sort-menu">
<span class="sort">Sort by :</span>
<li class="dropdown"><a class="dropBtn" href="#">Price <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li><a href="#">Price (hi to low)</a></li>
<li><a href="#">Price (low to hi)</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropBtn" href="#">Stars <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li><a href="#">Stars (hi to low)</a></li>
<li><a href="#">Stars (low to hi)</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropBtn" href="#">Review score <i class="fa fa-caret-down" aria-hidden="true"></i></a>
<ul class="dropMenu">
<li><a href="#">Score (hi to low)</a></li>
<li><a href="#">Score (low to hi)</a></li>
</ul>
</li>
</ul>
</div>