如何使它在您再次单击按钮时隐藏其菜单

Question

如何使其在再次单击按钮时隐藏菜单脚本的工作原理是，当打开另一个"；btn"；，活动的是隐藏的，+如果您在菜单字段外单击，则所有内容都将隐藏。如何使其在再次单击活动按钮时隐藏其菜单

<ul class="first_menu">
<li class="menu_item">
<button class="menu_btn">1 btn</button>
<div class="dropdown">
<ul class="dropdown__list">
<li class="dropdown__item">
<a href="#" class="dropdown__link">1 Подпункт</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">2 Подпункт</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">3 Подпункт</a>
</li>
</ul>
</div>
</li>
<li class="menu_item">
<button class="menu_btn">2 btn</button>
<div class="dropdown">
<ul class="dropdown__list">
<li class="dropdown__item">
<a href="#" class="dropdown__link">1 Подпункт</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">2 Подпункт</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">3 Подпункт</a>
</li>
</ul>
</div>
</li>
<li class="menu_item">
<button class="menu_btn">3 btn</button>
<div class="dropdown">
<ul class="dropdown__list">
<li class="dropdown__item">
<a href="#" class="dropdown__link">1 Подпункт</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">2 Подпункт</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">3 Подпункт</a>
</li>
</ul>
</div>
</li>
</ul>

.first_menu {
position: relative;
justify-content: center;
display: flex;
}
.menu_item,.dropdown__item {
list-style-type: none;
}
.menu_btn {
cursor: pointer;
border: none;
padding: 25px;  
background-color: black;
color: #ffffff;
font-weight: bold;
}
.dropdown {
transition: all 1s;
position: absolute;
top: 0;
transform: translateY(-100%);
background-color: black;
}
.dropdown__item {
text-align: center;
padding-bottom: 20px;
}
.dropdown__link {
text-decoration: none;
color: white;
font-weight: bold;
}
.active {
top: 100px;
transition: all 1s;
transform: translateY(-30%);
}

const btn = document.querySelectorAll('.menu_btn')
btn.forEach(function(item, i){
item.addEventListener('click', (e) => {
let currentBtn = e.currentTarget; 
let nextElemt = currentBtn.nextElementSibling; 
document.querySelectorAll('.dropdown.active').forEach(function(item, i) { 
item.classList.remove('active')
})
nextElemt.classList.add('active')
const menuOff = document.querySelector('.first_menu');
document.addEventListener('click', function(e) { 
const click = e.composedPath().includes(menuOff); 
if(!click) { 
nextElemt.classList.remove('active')
} 
})
})
})

Answer 1

检查关联下拉列表的classList是否包含打开下拉列表的类。如果是，则不添加类，而是使用classList.toggle将其删除。

您也不应该在每次单击时都向文档添加事件侦听器。在页面加载上无条件添加一个一次，并检查单击是否在.first-menu内部，以确定是否需要删除活动下拉列表。

const removeActive = () => {
document.querySelector('.dropdown.active')?.classList.remove('active');
};
for (const button of document.querySelectorAll('.menu_btn')) {
button.addEventListener('click', (e) => {
const thisDropdown = e.currentTarget.nextElementSibling;
const thisCurrentlyOpen = thisDropdown.classList.contains('active');
removeActive();
thisDropdown.classList.toggle('active', !thisCurrentlyOpen);
})
}
document.addEventListener('click', function(e) {
if (!e.target.closest('.first_menu')) {
removeActive();
}
});

const removeActive = () => {
document.querySelector('.dropdown.active')?.classList.remove('active');
};
for (const button of document.querySelectorAll('.menu_btn')) {
button.addEventListener('click', (e) => {
const thisDropdown = e.currentTarget.nextElementSibling;
const thisCurrentlyOpen = thisDropdown.classList.contains('active');
removeActive();
thisDropdown.classList.toggle('active', !thisCurrentlyOpen);
})
}
document.addEventListener('click', function(e) {
if (!e.target.closest('.first_menu')) {
removeActive();
}
});

.first_menu {
position: relative;
justify-content: center;
display: flex;
}
.menu_item,
.dropdown__item {
list-style-type: none;
}
.menu_btn {
cursor: pointer;
border: none;
padding: 25px;
background-color: black;
color: #ffffff;
font-weight: bold;
}
.dropdown {
transition: all 1s;
position: absolute;
top: 0;
transform: translateY(-100%);
background-color: black;
}
.dropdown__item {
text-align: center;
padding-bottom: 20px;
}
.dropdown__link {
text-decoration: none;
color: white;
font-weight: bold;
}
.active {
top: 100px;
transition: all 1s;
transform: translateY(-30%);
}

<ul class="first_menu">
<li class="menu_item">
<button class="menu_btn">1 btn</button>
<div class="dropdown">
<ul class="dropdown__list">
<li class="dropdown__item">
<a href="#" class="dropdown__link">1 Подпункт</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">2 Подпункт</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">3 Подпункт</a>
</li>
</ul>
</div>
</li>
<li class="menu_item">
<button class="menu_btn">2 btn</button>
<div class="dropdown">
<ul class="dropdown__list">
<li class="dropdown__item">
<a href="#" class="dropdown__link">1 Подпункт</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">2 Подпункт</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">3 Подпункт</a>
</li>
</ul>
</div>
</li>
<li class="menu_item">
<button class="menu_btn">3 btn</button>
<div class="dropdown">
<ul class="dropdown__list">
<li class="dropdown__item">
<a href="#" class="dropdown__link">1 Подпункт</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">2 Подпункт</a>
</li>
<li class="dropdown__item">
<a href="#" class="dropdown__link">3 Подпункт</a>
</li>
</ul>
</div>
</li>
</ul>