Как сделать открытие одного раскрывающегося списка рядом с другим?

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