하위 메뉴를 클릭 할 때 메뉴를 열어 두는 방법은 무엇입니까?

Question

요소 외부에서 클릭을 감지하는 eventListener를 사용하여 닫는 메뉴가 있습니다.

그러나 하위 메뉴를 트리거하는 요소를 클릭하면 메뉴가 닫히고 필요하지 않습니다.
여러 가지를 시도했지만 (Stack Overflow 등을 둘러 보았습니다.) 두 가지를 모두 할 수는 없었습니다.

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

을 나는 두 가지를 결합하려는 때문에 메뉴가 열려 : 나는 그것을 클릭하면 전 메뉴를 닫 하위 메뉴 버튼이 지금

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


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

}); 

:

여기에 JS 코드입니다 난 메뉴 또는 하위 메뉴 버튼을 클릭합니다. 여기

는 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

내가 그것을 작동하도록이 개 클래스를 선택했다 그것을 해결 @leotesta

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