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（条件为真）。

试试这个：

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

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

2 个答案: