Закрыть выпадающее меню при нажатии вне его
Сейчас меню отрывается при нажатии на поле ввода и закрывается при нажатии на соседнее поле.
Хотелось бы, чтобы оно закрывалось и при нажатии вне его.
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>
Источник: Stack Overflow на русском