问题描述
我实现了一个自定义下拉菜单，该菜单具有使用冒泡功能的关闭功能，并且我以前在页面上只有一个下拉菜单。 但是现在我有两个下拉菜单，如果我打开第一个下拉菜单并单击第二个下拉菜单，则第一个下拉菜单不会关闭。 我该如何解决？
我使用本机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);
链接到我的下拉菜单： :
1楼
GOTO 0
1
已采纳
2015-07-25 09:41:37
首先，为每个下拉列表向您的文档添加一个事件侦听器。 收到此事件后，每个下拉菜单均应自行关闭。
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;
}
这是更新的小提琴： :