Закрыть выпадающее меню при нажатии вне его

Рейтинг: 0Ответов: 0Опубликовано: 21.02.2023

Сейчас меню отрывается при нажатии на поле ввода и закрывается при нажатии на соседнее поле.
Хотелось бы, чтобы оно закрывалось и при нажатии вне его.
Event.stopPropagation() не подходит.

function showFilterList() {
  const title = document.querySelectorAll('.catalog__category-title--mobile')
  let list = document.querySelectorAll('.catalog__general-content-container')
  if (title && list) {
    title.forEach((e) => {
      e.addEventListener('click', function(c) {
        let path = c.currentTarget.dataset.path;
        list.forEach((b) => {
          b.classList.remove('catalog__general-content-container--active')
        })
        document.querySelector(`[data-target="${path}"]`).classList.add('catalog__general-content-container--active')
      })
    })
  }
}


showFilterList();
<div class="catalog__sale-container catalog__general-list">
  <h4 class="catalog__sale-title catalog__category-title--mobile title-reset" data-path="sale">Скидка</h4>
  <div class="catalog__sale-list-container catalog__general-content-container" data-target="sale">
    <ul class="catalog__sale list-reset">
      <li class="catalog__sale-items">
        <label class="catalog__sale-label checkbox-label" for="checkbox_18">
          <input type="checkbox" class="catalog__sale-checkbox checkbox-label__input" id="checkbox_18"/>
          <span class="catalog__span-accept checkbox-label__span">Более 5 000</span>
        </label>
      </li>
      <li class="catalog__sale-items">
        <label class="catalog__sale-label checkbox-label" for="checkbox_19">
          <input type="checkbox" class="catalog__sale-checkbox checkbox-label__input" id="checkbox_19"/>
          <span class="catalog__span-accept checkbox-label__span">Менее 5 000</span>
        </label>
      </li>
      <li class="catalog__sale-items">
        <label class="catalog__sale-label checkbox-label" for="checkbox_20">
          <input type="checkbox" class="catalog__sale-checkbox checkbox-label__input" id="checkbox_20"/>
          <span class="catalog__span-accept checkbox-label__span">Без скидки</span>
        </label>
      </li>
    </ul>
  </div>
</div>

Ответы

Ответов пока нет.