@privat13

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

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

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

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

Надеюсь, понятно объяснил ))
  • Вопрос задан
  • 89 просмотров
Пригласить эксперта
Ответы на вопрос 2
godsplane
@godsplane
Используйте дата атрибуты
Вешаете обработчик на документ. Проверяете таргет клика
Если таргет == data-modal=1 , то открывать модалку с аттрибутом data-modal=1 например. При клике вне любой кнопки закрывать все data-modal
Ответ написан
@wind-of
buttons.forEach(
  (button) => button.addEventListener( "click",
     (event) => {
         // Открываешь свою выпадашку
        event.stopPropagation()
        window.addEventListener("click", 
          ({target}) => target.closest(buttonSelector) === event.currentTarget 
                              ? /* юзер кликнул по дочерним элементам данной кнопки или по самой кнопке */ 
                              : /* закрываешь выпадашку */, 
          {once: true})
      }
    )
)


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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы