Question

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

现在，问题。 Fiddle

如您所见，我有两个自定义下拉菜单。它们中的每一个都可以通过鼠标和键盘打开和控制。我需要做的最后一件事就是实现以下功能：打开一个下拉列表应该关闭另一个下拉列表，然后在下拉列表外单击应该关闭任何打开的下拉列表（假设一次只能打开一个下拉列表）

我已经尝试在文档中添加一个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();
        }
    }
    ...
}

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

1 个答案: