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

Question

[viktorulyushev]

Есть много таких блоков:

<div class="material-block materials-filter-block">
    <div class="material-filter-block">
        <div class="filter-param material-params">
              <div class="catalog-filter-header">
                   <span class="catalog-filter-block-title">Тип товара</span>
               </div>
         <div class="filter-values">
                 контент
          </div>
        </div>
    </div>
</div>

Суть в том, что при нажатии на .catalog-filter-block-title должен открываться и закрываться.filter-values, т.е. ему присваивается/убирается класс open. При нажатии на .catalog-filter-block-title другого блока предыдущий .filter-values должен закрываться,т .е у него должен убираться open. И при нажатии на пустое пространство блоки должны закрываться.Проблема в том, что при повторном нажатии на .catalog-filter-block-title блок не закрывается.

https://jsfiddle.net/sfjureg5/

Answer 1

[0xD34F]

Вместо .filter-values класс лучше переключать у их самых дальних не общих предков, т.е., у .material-block. В этом случае не надо искать внутри контейнера элемент, у которого должен быть переключен класс, а если в будущем захотите внутри открытого .material-block стилизовать ещё какой-то элемент, то не придётся переписывать js-код.

Так что стили немного поправим:

- .material-block .filter-values.open {
+ .material-block.open .filter-values {

У кого надо переключать класс, по клику на какой элемент внутри надо переключать класс, что за класс:

const containerSelector = '.material-block';
const buttonSelector = `${containerSelector} .catalog-filter-block-title`;
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);
    }
  });
});