サブメニューをクリックしてメニューを開いたままにする方法は？

Question

私は、要素の外側で クリックを検出するeventListenerを使用して閉じるメニューを持っています。

しかし、サブメニューをトリガーする要素をクリックすると、 メニューも閉じます。これは必要ではありません。
私はいくつかのことを試しました（Stack Overflowなどを見て回ってみましたが）、両方を行うことができません。

ここで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'); 

私は2つを組み合わせたいので、メニューが開いたままになりますメニューをクリックするかサブメニューボタンをクリックするかを指定します。ここ

は、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> 

Answer 1

問題が

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

Answer 2

は..私はそれを動作させるために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'; 
         } 
        });