Как написать массив из выпадающих списков,где клик вне это массива закрывает все списки?

Question

У меня есть несколько выпадающих списков, которые должны закрываться, если клик происходит вне самих списков. Я сделал массив состоящий из кнопок для открытия списков и самих списков и хочу, чтобы клик вне этого массива закрывал списки,но не знаю как. Пытался сделать как-то так, но не получилось.

modalArr.forEach(item => item.addEventListener('click', function() {
    if(!modalArr.event.target){
        genreChoise.style.display = 'none';
        genreChoise.classList.remove('modal_choise_open');
        dateInput.style.display = 'none';
        dateInput.classList.remove('modal_choise_open');
        cinemaChoise.style.display = 'none';
        cinemaChoise.classList.remove('modal_choise_open');
    }
}))

let container = document.querySelector('.container');
let date = document.querySelector('.date');
let dateInput = document.querySelector('.date_input');
let cinema = document.querySelector('.cinema');
let cinemaChoise = document.querySelector('.cinema.choise_modal');
let genre = document.querySelector('.genre');
let genreChoise = document.querySelector('.genre.choise_modal');
let moldaArr = [date, dateInput, cinema, cinemaChoise, genre, genreChoise];

Answer 1

const className = '.someClass';
const all = Array.from(document.querySelectorAll(className));
document.addEventListener('click', ({
  target
}) => {
  const isOut = !all.some(el => (target === el) || null !== target.closest(className));
  if (isOut) {
    // закрыть
    all.forEach(el => {
      // например установить класс `.close`
      el.classList.add('close');
    });
  } else {
    all.forEach(el => {
      el.classList.remove('close');
    });
  }
  console.log('click', isOut ? 'isOut' : '');
});

.someClass {
  background-color: gray
}

.close {
  background-color: #8ff
}

<p>p</p>
<div class="someClass">
  div<br>div
</div>
<p>p</p>
<div class="someClass">
  <div>
    <div>
      div<br>div
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как написать массив из выпадающих списков,где клик вне это массива закрывает все списки?

Ответы (1 шт):