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

我有一个菜单使用eventListener关闭，检测到点击元素外部。如何在点击子菜单时保持菜单打开？

但是，当我点击触发子菜单的元素时，菜单也会关闭，这不是我们所需要的。
我尝试了很多东西（看看周围堆栈溢出等），但我不能让它做这两件事情。

这里的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>

来源

2016-09-19 timber535

问题是

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

来源

2016-09-20 00:18:01 leotesta

感谢@leotesta，但是这就是我一直trying.This结果是能够切换子菜单，但它可以防止菜单在外部点击时关闭。我甚至附加了一个id到这个类中，并且调用了id ..tried jquery .. – timber535

请添加一个jsfiddle @ timber254 – leotesta

解决了这个问题，我不得不选择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'; 
         } 
        });

来源

2017-01-08 10:15:57 timber535

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

回答

相关问题