0

Список открывается добавлением значения active атрибуту data-state. Закрывается выбором определенного варианта или нажатием на выбранный вариант. Нужно чтобы он закрывался еще и нажатием на любую другую область экрана. Вот код и моя попытка сделать это codepe

const selectSingle = document.querySelector('.select-city__select');
const selectSingle_title = selectSingle.querySelector('.select-city__title');
const selectSingle_labels = selectSingle.querySelectorAll('.select-city__label');

selectSingle_title.addEventListener('click', () => {
  if ('active' === selectSingle.getAttribute('data-state')) {
    selectSingle.removeAttribute('data-state');
  } else {
    selectSingle.setAttribute('data-state', 'active');
  }
});
for (let i = 0; i < selectSingle_labels.length; i++) {
  selectSingle_labels[i].addEventListener('click', (evt) => {
    selectSingle_title.textContent = evt.target.textContent;
    selectSingle.setAttribute('data-state', '');
  });
}
.select-city__select {
  position: relative;
}

.select-city__select[data-state=active] .select-city__content {
  opacity: 1;
  display: flex;
}

.select-city__title::before {
  content: "Город:";
  position: relative;
  top: 0;
  margin: 0px 5px 0px 0px;
}

.select-city__content {
  position: absolute;
  top: 23px;
  display: none;
  flex-direction: column;
  opacity: 0;
}

.select-city__input {
  display: none;
}
<div class="select-city">
  <div class="select-city__select" data-state="">
    <div class="select-city__title" data-default="moscow">Москва</div>
    <div class="select-city__content">
      <input id="moscow" class="select-city__input" type="radio" name="singleSelect" />
      <label for="moscow" class="select-city__label">Москва</label>
      <input id="dubai" class="select-city__input" type="radio" name="singleSelect" />
      <label for="dubai" class="select-city__label">Дубаи</label>
      <input id="stPetersburg" class="select-city__input" type="radio" name="singleSelect" />
      <label for="stPetersburg" class="select-city__label">Санкт-Петербург</label>
    </div>
  </div>
</div>

1 ответ 1

0

Добавьте в код следующее:

document.addEventListener('click', (e) => {
  if(e.target.closest('.select-city__select') !== selectSingle){
    selectSingle.removeAttribute('data-state');
  }
})
1
  • 1
    Спасибо! Все работает
    – Aerys
    20 авг 2022 в 4:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.