Rumah > Soal Jawab > teks badan
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') } }) }) })
P粉4468003292024-02-05 00:43:06
Semak lungsur turun persatuan classList
是否包含打开下拉列表的类。如果是,则不要添加该类,而是使用 classList.toggle
untuk 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-menu
untuk 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(); } });
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%);
}