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

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

我想将两者结合起来，因此无论我单击菜单还是子菜单按钮，菜单均保持打开状态。

这是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（条件为true）。

尝试这个：

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