如何做到當您再次單擊該按鈕時，它會隱藏其選單 該腳本的工作原理是，當打開另一個“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(); } });