Как закрыть выпадающие меню с помощью единой функции?

Question

[privat13]

Всем привет, уважаемые дамы и господа.
Есть две и более разные конструкции с разными выпадающими менюшками.
Нужно создать единую функцию, которая бы закрывала выпадающие менюшки при условии, если они открыты.

Пример codepen. Описание в js.

Либо возможно есть какое-то сформированное решение для подобных случаев? Много разных выпадашек и если они открыты, то закрывались по клику вне их и по клику по открывающему элементу выпадашка открывалась/закрывалась.

Надеюсь, понятно объяснил ))

Answer 1

[godsplan]

Используйте дата атрибуты
Вешаете обработчик на документ. Проверяете таргет клика
Если таргет == data-modal=1 , то открывать модалку с аттрибутом data-modal=1 например. При клике вне любой кнопки закрывать все data-modal

Comments

[privat13]

чувствую без вас не справлюсь

Answer 2

[wind-of]

buttons.forEach(
  (button) => button.addEventListener( "click",
     (event) => {
         // Открываешь свою выпадашку
        event.stopPropagation()
        window.addEventListener("click", 
          ({target}) => target.closest(buttonSelector) === event.currentTarget 
                              ? /* юзер кликнул по дочерним элементам данной кнопки или по самой кнопке */ 
                              : /* закрываешь выпадашку */, 
          {once: true})
      }
    )
)

Работает только если выпадающее меню является дочерним узлом кнопки, открывающей её.

Comments

[privat13]

часто встречаю в инете вариант, что выпадающее меню является дочерним узлом кнопки.... как будто надо взять за правило так делать. У вас какое мнение по этому поводу?

[wind-of]

Это просто, удобно, и подходит практически всегда. Лучше решения я не знаю.

[privat13]

получается мне проще все переделать, чтобы выпадающие были дочерними элементами. А есть ли у вас реализованные проекты, где могу пощелкать данный функционал?

[wind-of]

Nope.