如何做到当您再次单击该按钮时，它会隐藏其菜单 该脚本的工作原理是，当打开另一个“btn”时，活动的“btn”将被隐藏，+如果您在菜单字段之外单击，则所有“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')
}
})
})
}) 
检查关联下拉列表的
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(); } });