搜尋

首頁  >  問答  >  主體

建立一個在再次點擊按鈕時隱藏選單的功能

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

P粉513318114P粉513318114329 天前485

全部回覆(1)我來回復

  • P粉446800329

    P粉4468003292024-02-05 00:43:06

    檢查關聯下拉清單的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();
  }
});

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

    回覆
    0
  • 取消回覆