cari

Rumah  >  Soal Jawab  >  teks badan

Buat fungsi yang menyembunyikan menu apabila butang diklik sekali lagi

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粉513318114P粉513318114378 hari yang lalu556

membalas semua(1)saya akan balas

  • P粉446800329

    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%);
}

    balas
    0
  • Batalbalas