0

Подскажите, как сделать открытие по клику на js. Суть в том, что у меня есть определённое кол. блоков, при нажатии на блок, должно появляться окно с его настройками. Кол. этих блоков динамическое, и выдавать разные id им не выйдет.

var block = document.getElementById('settings');

document.addEventListener('click', function(e) {
  if (e.target.id == 'trigger') {
    block.classList.remove('hide');
  }
  if (e.target.id != 'trigger') {
    block.classList.add('hide');
  }
});
*{color: #fff;}
.user {background: #000;height: 50px; margin: 10px 0;}
.settings {cursor: pointer;}
.hide {display: none;}
<div class="blocks">
  <div class="user" id="user">
    <span class="settings" id="trigger">Открыть настройки</span>
    <div id="settings" class="hide">
      <span>настройка1</span>
      <span>настройка2</span>
    </div>
  </div>
  <div class="user" id="user">
    <span class="settings" id="trigger">Открыть настройки</span>
    <div id="settings" class="hide">
      <span>настройка1</span>
      <span>настройка2</span>
    </div>
  </div>
  <div class="user" id="user">
    <span class="settings" id="trigger">Открыть настройки</span>
    <div id="settings" class="hide">
      <span>настройка1</span>
      <span>настройка2</span>
    </div>
  </div>
</div>

4
  • Назначайте click на нужный вам div или ещё чего. И в самой функции смотрите на контекст this 6 ноя 2020 в 4:28
  • Да вижу. Что творится. Но это не значит что в дом это один и тот же объект 6 ноя 2020 в 4:30
  • Чтоб различать используйте this если target не помогает вам 6 ноя 2020 в 4:32
  • Либо смотрите состояние таргета тоже и не только класс 6 ноя 2020 в 4:32

1 ответ 1

1

const users = Array.from(document.querySelectorAll('.user'));
const triggers = users.map(item => item.querySelector('.trigger'));  // Тоже самое, что Array.from(document.querySelectorAll('.trigger'))

triggers.forEach((item, i) => { // проходимся по каждому тригеру
  item.addEventListener('click', (e) => { // ставим на него слушатель события клика
    users[i].classList.toggle('active'); // что-то делаем
  });
});
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  font-size: 20px;
}

.blocks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.user {
  background-color: black;
  color: white;
  padding: 10px;
  transition: margin-top 0.2s linear;
}

.user + .user {
  margin-top: 20px;
}

.user.active > * + * {
  margin-top: 10px;
}

.trigger {
  background-color: yellow;
  color: black;
  padding: 5px;
  cursor: pointer;
  user-select: none;
  border: 2px solid transparent;
  transition: border-color 0.2s linear, color 0.2s linear;
}

.trigger:hover {
  border-color: red;
  color: red;
}

.user.active .trigger {
  border-color: white !important;
  color: green !important;
}

.settings {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.2s linear, margin-top 0.2s linear;
}

.user.active .settings {
  max-height: 23px;
}
<div class="blocks">
  <div class="user">
    <div class="trigger">Открыть настройки</div>
    <div class="settings">
    Настройки
    </div>
  </div>
  <div class="user">
    <div class="trigger">Открыть настройки</div>
    <div class="settings">
    Настройки
    </div>
  </div>
  <div class="user">
    <div class="trigger">Открыть настройки</div>
    <div class="settings">
    Настройки
    </div>
  </div>
</div>

Ваш ответ

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

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