单击子菜单时如何保持菜单打开？

Question

I have a menu that closes using an eventListener detecting clicks outside of the element.

However, when I click on the element that triggers the sub-menu the menu also closes, which is not what is needed.
I tried a number of things (looked around on Stack Overflow etc.) but I can't get it to do both things.

here's the JS code:

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


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

});

now i have a submenu button that closes the menu when i click on it:

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

I want to combine the two so the menu stays open whether I click on the menu or the sub-menu button.

here's the 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

The problem is

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

When you press the sub-menu element, it is not the boxmenu element, and its parentNode is <li id="menu-item-43" class=""> and not boxmenu (the condition is true).

Try this:

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

Answer 2

Solved it I had to select 2 classes to make it work..

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