Erstellen Sie eine Funktion, die das Menü ausblendet, wenn erneut auf die Schaltfläche geklickt wird

Question

So stellen Sie sicher, dass das Menü ausgeblendet wird, wenn Sie erneut auf die Schaltfläche klicken Die Funktionsweise dieses Skripts besteht darin, dass beim Öffnen eines anderen „btn“ das aktive „btn“ ausgeblendet wird. + Wenn Sie außerhalb des Menüfelds klicken, werden alle „btn“ ausgeblendet. Wie kann ich dafür sorgen, dass die aktive Schaltfläche ihr Menü ausblendet, wenn ich erneut darauf klicke

<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')
        } 
    })
})
})

Answer 1

检查关联下拉列表的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%);
}

  

    1 btn
    

      

        

          1 Подпункт
        
        

          2 Подпункт
        
        

          3 Подпункт
        
      
    
  
  

    2 btn
    

      

        

          1 Подпункт
        
        

          2 Подпункт
        
        

          3 Подпункт
        
      
    
  
  

    3 btn
    

      

        

          1 Подпункт
        
        

          2 Подпункт
        
        

          3 Подпункт