在下拉菜單中切換相同 class 的各個元素

Question

我正在構建一個下拉菜單。 事實上，當我打開一個子菜單時，它會保持打開狀態，即使我打開第二個子菜單也是如此。 當我打開第二個子菜單時，它應該關閉所有其他打開的菜單。

 const submenuLinks = document.querySelectorAll('.has-submenu > a'); submenuLinks.forEach(element => element.addEventListener('click', function(e) { var submenu = element.nextElementSibling; if (submenu.classList.contains('menu-hide')) { submenu.classList.add('menu-show'); submenu.classList.remove('menu-hide'); } else { submenu.classList.add('menu-hide'); submenu.classList.remove('menu-show'); } }));

 .menu-hide { display: none; }.menu-show { display: block; }

 <nav> <ul class="menu"> <li> <a href="#">Menu Item 1</a> </li> <li class="has-submenu"> <a href="#">Menu Item 2 &raquo;</a> <ul class="menu-sub menu-hide"> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> </ul> </li> <li class="has-submenu"> <a href="#">Menu Item 3 &raquo;</a> <ul class="menu-sub menu-hide"> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> </ul> </li> </ul> </nav>

Answer 1

在隱藏當前子菜單的邏輯之前，您可以隱藏每個子菜單（ul with class 'menu-sub'）。 這樣，只會展開當前的子菜單。 這是經過編輯的 javascript 代碼：

const submenuLinks = document.querySelectorAll('.has-submenu > a');

    submenuLinks.forEach((element) =>
      element.addEventListener('click', function (e) {
        var allSubmenus = document.querySelectorAll('.menu-sub');
        allSubmenus.forEach((submenu) => {
          submenu.classList.remove(...submenu.classList);
          submenu.classList.add('menu-sub');
          submenu.classList.add('menu-hide');
        });
        var currentSubmenu = element.nextElementSibling;
        if (currentSubmenu.classList.contains('menu-hide')) {
          currentSubmenu.classList.add('menu-show');
          currentSubmenu.classList.remove('menu-hide');
        } else {
          currentSubmenu.classList.add('menu-hide');
          currentSubmenu.classList.remove('menu-show');
        }
      })
    );

我在那里額外做的是從子菜單中刪除所有類，添加回“菜單子”和“菜單隱藏”類。

Answer 2

您必須遍歷所有 ul 以檢查類。 我評論了我添加給你的 js 代碼。

  const uls = document.querySelectorAll('.menu-sub');
  uls.forEach(a => {
      if (a.classList.contains('menu-show')) {        
        a.classList.remove('menu-show')  
        a.classList.add('menu-hide')  
      }      
    })

 const submenuLinks = document.querySelectorAll('.has-submenu > a'); submenuLinks.forEach(element => element.addEventListener('click', function(e) { /* start */ const uls = document.querySelectorAll('.menu-sub'); uls.forEach(a => { if (a.classList.contains('menu-show')) { a.classList.remove('menu-show') a.classList.add('menu-hide') } }) /* end */ var submenu = element.nextElementSibling; if (submenu.classList.contains('menu-hide')) { submenu.classList.add('menu-show'); submenu.classList.remove('menu-hide'); } else { submenu.classList.add('menu-hide'); submenu.classList.remove('menu-show'); } }));

 .menu-hide { display: none; }.menu-show { display: block; }

 <nav> <ul class="menu"> <li> <a href="#">Menu Item 1</a> </li> <li class="has-submenu"> <a href="#">Menu Item 2 &raquo;</a> <ul class="menu-sub menu-hide"> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> </ul> </li> <li class="has-submenu"> <a href="#">Menu Item 3 &raquo;</a> <ul class="menu-sub menu-hide"> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> </ul> </li> </ul> </nav>

Answer 3

• 無需使用兩個不同的類來顯示和隱藏子菜單。
• 您可以使用 CSS 默認隱藏所有子菜單，只顯示帶有.menu-show的子菜單

嘗試這個

 const submenuLinks = document.querySelectorAll('.has-submenu > a'); submenuLinks.forEach(element => element.addEventListener('click', function(e) { var submenu = element.nextElementSibling; if (submenu.classList.contains('menu-show')) { submenu.classList.remove('menu-show'); } else { submenuLinks.forEach(a => a.nextElementSibling.classList.remove('menu-show')); submenu.classList.add('menu-show'); } }));

 .menu-sub { display: none; }.menu-show { display: block; }

 <nav> <ul class="menu"> <li> <a href="#">Menu Item 1</a> </li> <li class="has-submenu"> <a href="#">Menu Item 2 &raquo;</a> <ul class="menu-sub"> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> </ul> </li> <li class="has-submenu"> <a href="#">Menu Item 3 &raquo;</a> <ul class="menu-sub"> <li><a href="#">Submenu Item 1</a></li> <li><a href="#">Submenu Item 2</a></li> <li><a href="#">Submenu Item 3</a></li> </ul> </li> </ul> </nav>