Vanilla JS除了'active'類之外的所有其他元素都刪除了類

Question

我正在嘗試使用Vanilla JavaScript構建一個下拉菜單，我無法找到在單擊的下拉菜單中添加一個活動類的最佳方法，然后同時從兄弟元素中刪除所有其他活動類。

到目前為止，這就是我所擁有的JS：

var _dropdowns = [].slice.call(document.getElementsByClassName('main-menu-li_dropdown'));

            _dropdowns.forEach(function(dropdowns) {
                dropdowns.addEventListener('click', function( event ){
                    event.preventDefault();
                    console.log(this !== event.target);
                    this.classList.toggle('active');
                });
            });

這是我的標記：

<nav id="main-nav">
    <ul>
        <li class="main-menu-li_dropdown">
            <a href="">link</a>
            <ul class="sub-nav">
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
            </ul>
        </li>
        <li class="main-menu-li_dropdown">
            <a href="">link</a>
            <ul class="sub-nav">
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
            </ul>
        </li>
        <li class="main-menu-li_dropdown">
            <a href="">link</a>
            <ul class="sub-nav">
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
            </ul>
        </li>
        <li class="main-menu-li_dropdown">
            <a href="">link</a>
            <ul class="sub-nav">
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
            </ul>
        </li>
        <li class="main-menu-li_dropdown">
            <a href="">link</a>
            <ul class="sub-nav">
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
            </ul>
        </li>
    </ul>
</nav>

Answer 1

您可以遍歷所有項目並刪除該類，然后將該類添加到單擊的項目中。

這是一個例子：

http://jsbin.com/rivogelaqu/edit?html,js,output

let dropDowns = Array.from(document.querySelectorAll('.main-menu-li_dropdown'));

const handleClick = (e) => {
  e.preventDefault();
  dropDowns.forEach(node => {
    node.classList.remove('active');
  });
  e.currentTarget.classList.add('active');

}

dropDowns.forEach(node => {
  node.addEventListener('click', handleClick)
});

編輯：替代單擊處理程序

這是一個替代的單擊處理程序，它可以避免每次單擊時出現循環，只檢查元素。 可能更高效。

const handleClick = (e) => {
  e.preventDefault();
  const active = document.querySelector('.active');
  if(active){
    active.classList.remove('active');
  }
  e.currentTarget.classList.add('active');
}