javascript - 使用冒泡关闭函数

Question

我已经实现了一个自定义下拉菜单，它具有使用冒泡的关闭功能，而我曾经在页面上只有一个下拉菜单。但现在我有两个下拉菜单，如果我打开第一个下拉菜单并单击第二个下拉菜单，我的第一个下拉菜单不会关闭。我该如何修复它？

我使用原生 JS 的关闭函数:

add_event(document, 'click', function(event) {
    event = event || window.event;
    if (!event.keyCode) {
        var elem = event.target;

        while (elem !== document) {
            if (elem && elem.className === 'dropdown') {
                return;
            }
            elem = elem.parentNode;
        }

        close();
    }
}, false);

链接到我的下拉列表:http://jsfiddle.net/Lv7ou8mp/

Answer 1

首先，为每个下拉列表添加一个事件监听器到文档中。当收到此事件时，每个下拉菜单都会自行关闭。

document.addEventListener('closeDropdown', close);

现在创建一个函数来触发此事件:

function dispatchCloseEvent() {
    var evt = document.createEvent('Event');
    evt.initEvent('closeDropdown', true, false);
    document.dispatchEvent(evt);
}

最后，在打开下拉列表之前，我们将调用此函数以确保文档中的其他下拉列表关闭。

open 函数现在如下所示:

function open() {
    dispatchCloseEvent();
    dropdown_content.classList.remove('hidden');
    dropdown_content.scrollTop = 0;
    is_open = true;
}

这是更新后的 fiddle :http://jsfiddle.net/Lv7ou8mp/1/