как сделать, чтобы при нажатии на любой объект снаружи класса header__menu-dropdown удалялся класс select-header__visible или если я нажал на свой элемент, чтобы закрыть выпадающие меню. Сейчас удаляется класс только, если я нажму только на другой элемент в меню.
const btnLink = document.querySelectorAll('.js-select');
btnLink.forEach(el => {
el.addEventListener('click', (e) => {
document.querySelectorAll('.header__menu-dropdown').forEach(el => {
el.classList.remove('select-header__visible')
});
let parent = e.currentTarget.closest('.header__menu-dropdown');
parent.classList.add('select-header__visible');
});
})
.select-header__main {
visibility: hidden;
opacity: 0;
}
.select-header__visible .select-header__main {
opacity: 1;
visibility: visible;
}
<div class="header__menu-dropdown">
<div class="menu-item js-select">
Trigger
</div>
<div class="select-header__body">
<div class="select-header__main ">
Content
</div>
</div>
</div>
document.querySelectorAll('.header__menu-dropdown *').forEach(e => {e.addEventListener('click', () => {document.querySelector('.header__menu-dropdown').classList.remove('select-header__visible') }) })
, но лучше делать через делегацию события.