search

Home  >  Q&A  >  body text

Create a function that hides the menu when the button is clicked again

How to make it so that when you click the button again it hides its menu The way this script works is that when another "btn" is opened, the active "btn" will be hidden, and if you click outside the menu field, all "btn" will be hidden. How can I make the active button hide its menu when I click it again

<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 days ago484

reply all(1)I'll reply

  • P粉446800329

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

    Check whether the classList of the associated drop-down list contains the class that opens the drop-down list. If so, don't add the class, but use classList.toggle to remove it.

    You also shouldn't add an event listener to the document on every click. Unconditionally add one, once when the page loads, and check if the click is within .first-menu to determine if the active dropdown needs to be removed. 

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

    reply
    0
  • Cancelreply