Как закрыть 2 одинаковых попапа?

Question

[Breeze1]

Подскажите, где я допустил ошибку https://codepen.io/brezze/pen/WNvObpZ

Есть два одинаковых попапа которые открываются по клику. Они должны закрываться по клику вне области, если один попап открыт, то другой должен закрываться при открытие второго. Также если мы открываем попап, он должен закрываться по повторному клику на toggler. Сейчас все работает правильно, кроме закрытия попапа после повторного клика.

Answer 1

[0xD34F]

- .dropdown__block.open {
+ .dropdown.open .dropdown__block {

const containerSelector = '.dropdown';
const buttonSelector = `${containerSelector} .dropdown__toggler`;
const activeClass = 'open';


// jquery, как вы и хотели
$(document).on('click', ({ target: t }) => {
  const $container = $(t).closest(containerSelector);
  const $button = $(t).closest(buttonSelector);

  if ($button.length) {
    $container.toggleClass(activeClass);
  }

  $(containerSelector).not($container).removeClass(activeClass);
});

// или, к чёрту jquery
document.addEventListener('click', ({ target: t }) => {
  const container = t.closest(containerSelector);
  const button = t.closest(buttonSelector);

  if (button) {
    container.classList.toggle(activeClass);
  }

  document.querySelectorAll(containerSelector).forEach(n => {
    if (n !== container) {
      n.classList.remove(activeClass);
    }
  });
});

Comments

[Breeze1]

Спасибо

[Breeze1]

Скажите, а если внутри toggler будут другие элменты, img, span. Сейчас отрабатывает только если внутри dropdown__toggler нету других элементов.

[0xD34F]

Breeze1, обновил ответ.