如何讓一個下拉菜單關閉另一個下拉菜單？

我想學習純原生JavaScript，所以請不要使用框架來解決任務。我知道這很棒，學習他們將是我完成純JS的第一件事:)如何讓一個下拉菜單關閉另一個下拉菜單？

現在，問題。 Fiddle

正如你所看到的，我有兩個自定義下拉菜單。它們每個都可以用鼠標和鍵盤打開和控制。我需要做的最後一件事是完成以下功能：打開一個下拉框應關閉另一個下拉框，並且在下拉框之外點擊應該關閉任何打開的下拉框（假設一次只能打開一個下拉框）。

我試着添加onclick監聽到文檔，這將關閉該下拉菜單，如果其中任何一個都是開放的，但之前沒有用過，但是我點擊該文件一旦後，下拉式菜單中沒有顯示任何更多。但這不是解決一半問題的解決方案。因爲我將標誌bIsOpen分配給對象，所以我無法從另一個對象訪問它們以查看它是否被觸發。

給我一個提示，請:)

來源

2013-02-11 Anton Matyulkov

是否使用匈牙利命名法？請不要。 – 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(); 
     } 
    } 
    ... 
}

來源

2013-02-11 14:55:48

如何讓一個下拉菜單關閉另一個下拉菜單？

回答

相關問題