如何在外部点击时使用Javascript关闭CSS下拉菜单？

Question

我想使用纯JavaScript（而非jquery）关闭在菜单外部单击时创建的纯CSS下拉菜单。 我怎样才能做到这一点？

HTML：

<ul>
    <div class="submenu">
        <ul></ul>
    </div>
    <div class="submenu">
        <ul></ul>
    </div>
</ul>

那是我HTML的基本结构。 如果要在子菜单外单击，我想关闭子菜单。 用纯JavaScript可以做到吗？ 到目前为止，我已经尝试过了：

Javascript：

        <script>
            document.onclick = closeMenu();
            function closeMenu() {
                document.getElementsByClassName("submenu").style.display = 'none';
            }
        </script>

这似乎不起作用。 有任何想法吗？

Answer 1

进行一些更改：您未正确分配onclick ，它应该是对函数的引用，而不是调用函数的结果：

 document.onclick = closeMenu;

其次，您需要使用事件委托来确定clicked元素是否是submenu div的后代。 这样的功能应该可以确定事件目标节点是否是子菜单的子级：

function parentIsSubmenu(child) {
     var node = child.parentNode;
     while (node != null) {
         if ((node.className || '').indexOf('submenu') > -1) {
             return true;
         }
         node = node.parentNode;
     }
     return false;
}

更改您的closeMenu函数，以检查clicked元素是否是子菜单的子项，如果不是，请遍历每个子菜单项并将display设置为none（当前无法使用）。

function closeMenu(event) {
    if(!parentIsSubmenu(event.target)) {
        var submenus = document.getElementsByClassName("submenu");
        for(var i = 0; i < submenus.length; i++) {
            submenus[i].style.display = 'none';
        }
    }
}

这是一个工作示例： https : //jsfiddle.net/m2muz5en/