搜索

首页  >  问答  >  正文

创建一个在再次单击按钮时隐藏菜单的功能

如何做到当您再次单击该按钮时，它会隐藏其菜单 该脚本的工作原理是，当打开另一个“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 天前481

全部回复(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
  • 取消回复