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

这是更新的小提琴：http://jsfiddle.net/Lv7ou8mp/1/

使用冒泡关闭功能

1 个答案: