如何打开一个下拉菜单关闭另一个下拉菜单？

Question

我正在尝试学习纯本地JavaScript ，所以请不要建议使用框架来解决任务。 我知道这太棒了，当我用完纯JS时，要学习它们将是我要做的第一件事:)

现在，这个问题。 小提琴

如您所见，我在那里有两个自定义下拉菜单。 它们中的每一个都可以用鼠标和键盘打开和控制。 解决此任务的最后一件事是实现以下功能：打开一个下拉菜单应关闭另一个下拉菜单，单击下拉菜单外部应关闭所有打开的下拉菜单（假设一次只能打开一个下拉菜单） 。

我尝试将onclick侦听器添加到文档中，如果其中任何一个打开但之前未使用过，则会关闭下拉菜单，但是单击文档一次后，下拉列表将不再显示。 但这甚至不能解决一半的问题。 由于我将标志bIsOpen分配给对象，因此无法从另一个对象访问它们以查看其是否已触发。

给我一个提示，请:)

Answer 1

将打开和关闭逻辑移到它们自己的函数中：

DropDown.prototype.open = function (e) {
    ...
}

DropDown.prototype.close = function (e) {
    ...
}

和

this.htmlDropDown.onclick = function (e) {
    if (this.bIsOpen) {
        this.open(e);
    } else {
        this.close(e);
    }
}

（确保打开和关闭功能调整bIsOpen ，而不调整onclick处理程序。）

然后，添加存在的所有当前下拉列表的列表：

function DropDown(htmlObject) {
    DropDown.dropdowns.push(this);
    ...
}

DropDown.dropdowns = []; // no 'prototype'

最后，在打开器中，关闭所有其他下拉列表：

DropDown.prototype.open = function (e) {
    var dropdown;
    for (var i = 0; i < DropDown.dropdowns.length; i++) {
        dropdown = DropDown.dropdowns[i];
        if (dropdown !== this) {
            dropdown.close();
        }
    }
    ...
}