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

问题描述：

我想学习纯原生JavaScript，所以请不要使用框架来解决任务。我知道这很棒，学习他们将是我完成纯JS的第一件事:)如何让一个下拉菜单关闭另一个下拉菜单？

现在，问题。 Fiddle

正如你所看到的，我有两个自定义下拉菜单。它们每个都可以用鼠标和键盘打开和控制。我需要做的最后一件事是完成以下功能：打开一个下拉框应关闭另一个下拉框，并且在下拉框之外点击应该关闭任何打开的下拉框（假设一次只能打开一个下拉框）。

我试着添加onclick监听到文档，这将关闭该下拉菜单，如果其中任何一个都是开放的，但之前没有用过，但是我点击该文件一旦后，下拉式菜单中没有显示任何更多。但这不是解决一半问题的解决方案。因为我将标志bIsOpen分配给对象，所以我无法从另一个对象访问它们以查看它是否被触发。

给我一个提示，请:)

是否使用匈牙利命名法？请不要。 – 2013-02-11 14:52:35

@WaleedKhan为什么？ – 2013-02-11 14:54:22

@WaleedKhan为什么不呢？ – rsplak 2013-02-11 14:55:38

答

移动的开闭逻辑到自己的职能：

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(); 
     } 
    } 
    ... 
}

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

相关推荐