Cara membuatnya supaya apabila anda mengklik butang sekali lagi ia menyembunyikan menunya Cara skrip ini berfungsi ialah apabila "btn" lain dibuka, "btn" aktif akan disembunyikan, + jika anda mengklik di luar medan menu, semua "btn" akan disembunyikan. Bagaimana saya boleh membuat butang aktif menyembunyikan menunya apabila saya mengkliknya semula
<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')
}
})
})
}) 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Semak lungsur turun persatuan
classList是否包含打开下拉列表的类。如果是，则不要添加该类，而是使用classList.toggleuntuk memadamkannya.Anda juga tidak seharusnya menambahkan pendengar acara pada dokumen pada setiap klik. Tambah satu tanpa syarat, sekali apabila halaman dimuatkan, dan semak sama ada klik berada dalam
.first-menuuntuk menentukan sama ada lungsur turun aktif perlu dialih keluar.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(); } });