如何在點擊子菜單時保持菜單打開？

我有一個菜單使用eventListener關閉，檢測到點擊元素外部。如何在點擊子菜單時保持菜單打開？

但是，當我點擊觸發子菜單的元素時，菜單也會關閉，這不是我們所需要的。
我嘗試了很多東西（看看周圍堆棧溢出等），但我不能讓它做這兩件事情。

這裏的JS代碼：

window.addEventListener('mouseup', function(event){ 
    var boxmenu = document.getElementById('mainnav-mobi'); 


    if (event.target != boxmenu && event.target.parentNode != boxmenu){ 
     boxmenu.style.display = 'none'; 
    } 

});

現在我有一個子菜單按鈕關閉菜單時，我點擊它：

var subButton = document.getElementByClassName('btn-submenu');

我想這兩個結合，從而菜單保持打開狀態無論我點擊菜單還是子菜單按鈕。

這裏的HTML：

<nav id="mainnav-mobi" class="mainnav" role="navigation" style="display: none;"> 
    <div class="menu-menu-1-container"> 
     <ul id="menu-menu-1" class="menu"> 

      <li id="menu-item-43" class=""> 

       <a href="">My Account</a><span class="btn-submenu"></span> 
       <ul class="sub-menu" style="display: none;"> 
        <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item- object-page menu-item-36"> 
         <a href="">Login</a></li> 
       </ul> 
      </li> 
      <li id="menu-item-55" class=""> 
       <a href=""> link</a></li> 
     </ul> 
    </div> 
</nav>

來源

2016-09-19 timber535

問題是

if (event.target != boxmenu && event.target.parentNode != boxmenu)

當按下子菜單元素，它不是boxmenu元素，和其parentNode爲<li id="menu-item-43" class="">，而不是boxmenu（條件是真的）。

試試這個：

var subButton = document.getElementByClassName('btn-submenu'); 
if (event.target != boxmenu && event.target.parentNode != boxmenu && event.target != subButton){ 
    boxmenu.style.display = 'none'; 
}

來源

2016-09-20 00:18:01 leotesta

感謝@leotesta，但是這就是我一直trying.This結果是能夠切換子菜單，但它可以防止菜單在外部點擊時關閉。我甚至附加了一個id到這個類中，並且調用了id ..tried jquery .. – timber535

請添加一個jsfiddle @ timber254 – leotesta

解決了這個問題，我不得不選擇2類，使其工作..

window.addEventListener('mouseup', function (event) { 
var boxmenu = document.getElementById('mainnav-mobi'); 
var subMenu = document.querySelector('.btn-submenu'); 
if (event.target != boxmenu && event.target.parentNode 
!= boxmenu && event.target != subMenu && event.target.parentNode != subMenu){ 
          boxmenu.style.display = 'none'; 
         } 
        });

來源

2017-01-08 10:15:57 timber535

如何在點擊子菜單時保持菜單打開？

回答

相關問題