javascript - 如何通过点击div和js外部来关闭可扩展菜单

Question

我在js中创建了一个可扩展的菜单。我使用单击事件添加开放类，然后再次单击以删除该类。

我想在单击菜单外时关闭菜单。我尝试使用 document.addEventListener 但似乎不起作用。

function collapse() {
    if (this.classList.contains('open')) {
        this.classList.remove('open');
        document.removeEventListener('click', collapse, false);
    } else {
        this.classList.add('open');
        document.addEventListener('click', collapse, false);
    }
}


var x = document.getElementsByClassName("toggle-menu");
for (var i = 0; i < x.length; i++) {
    x[i].addEventListener('click', collapse, false);
}

这里是 fiddle http://jsfiddle.net/4cv220mc/

谢谢

Answer 1

我注意到，即使您单击菜单中的 li 元素之一，您发布的代码也会关闭菜单 - 这肯定是不可取的，因此最好进行检查仅当单击菜单的 h3 元素时，才在折叠事件的目标上单击并关闭/打开。

其次，您在这里要寻找的是 event.stopPropagation 函数。这样，您可以将事件监听器放在 toggle-menu 类上，也可以放在 document.documentElement 上 - 这将是 html 元素(您可以将其放在 document.body 上，但有时不会填满屏幕)。

因此菜单事件监听器将切换 open 类并停止进一步传播。 html 事件监听器 - 现在只有在菜单事件监听器未首先被调用时才会被调用 - 将检查是否有任何打开的菜单，如果有，将删除 open 他们所有人的类(class)。

这样您就可以拥有尽可能多的菜单，并且单击任何打开的菜单(包括另一个菜单)之外的任何位置都可以将其关闭。

这是 jsFiddle 的 JS 代码(我使用 [].slice.call 将所有菜单元素转换为数组，以便我可以对它们调用 forEach 函数，我发现这更容易读/写，但你的计数器方法当然也有效):

var html = document.documentElement,
    menus = [].slice.call(document.getElementsByClassName('toggle-menu'));

function menuClick(e){
    e.stopPropagation();
    if(e.target.tagName.toLowerCase()=='h3'){
        this.classList.toggle('open');
    }
    var openMenus = document.querySelectorAll('.open.toggle-menu');
    for(var i=0;i<openMenus.length;i++){
        if(openMenus[i]==this)
            continue;
        openMenus[i].classList.remove('open');
    }
}
function bodyClick(e){
    if(document.querySelector('.toggle-menu.open')){
        menus.forEach(function(menu){
            if(menu.classList.contains('open'))
                menu.classList.remove('open');
        });
    }
}
menus.forEach(function(menu){
    menu.addEventListener('click',menuClick,false);
});
html.addEventListener('click',bodyClick,false);

如果您希望同时打开菜单(单击一个菜单不会关闭其他菜单)，您可以删除 menuClick 函数中从 var openMenus 开始的部分。

这是一个 fiddle :http://jsfiddle.net/811r0nzw/