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

【问题标题】：How to keep a menu open when clicking on a sub-menu?单击子菜单时如何保持菜单打开？
【发布时间】：2017-01-08 18:15:57
【问题描述】：

我有一个使用 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>

【问题讨论】：

标签： javascript jquery

【解决方案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';
}

【讨论】：

谢谢@leotesta，但这就是我一直在尝试的。这导致能够切换子菜单，但它会阻止菜单在点击外部时关闭。我什至在课堂上附加了一个 id 并调用了 id..tried Jquery..
请添加一个jsfiddle @timber254

【解决方案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';
                        }
                    });

【讨论】：