Как сделать один обработчик для всех менюшек?

Question

[Aza Broflovski]

На странице есть кнопки, при клике на которых появляется выпадающее меню.
Вот пример: https://jsfiddle.net/AzaBroflovski/8o1qfod1/

1. Как сделать так, чтобы только одна менюшка оставалось активной?
2. Как сделать так, чтобы при клике за пределами меню, закрывалось меню?

Answer 1

[0xD34F]

Добавляем делегированный обработчик клика, где делаем следующие проверки:

1. Если клик был за пределами какого-либо выпадающего меню - закрываем их все
2. Если клик был по кнопке открытия - открываем соответствующее ей меню

const cardSelector = '.post';
const buttonSelector = '.post > img';
const menuSelector = '.post-info';
const activeClass = 'active';

document.addEventListener('click', function(e) {
  if (!e.target.closest(menuSelector)) {
    document.querySelectorAll(menuSelector).forEach(n => n.classList.remove(activeClass));
  }

  if (e.target.matches(buttonSelector)) {
    e.target.closest(cardSelector).querySelector(menuSelector).classList.add(activeClass);
  }
});

Comments

[Aza Broflovski]

Спасибо вам большое !

[Kovalsky]

Спасибо вам, отличное решение! И кстати я думал, что на тостер вроде как нельзя сливать свои задачки чтобы их кто-то решил, но раз этим теперь занимается Виктор, то буду ему иногда подкидывать работу.