Не закрывается popup блок при повторном нажатии на кнопку

Question

Есть код, который вставляет записи в index.php из БД.

Для каждой кнопки создается уникальный data-id="<?php echo $link['id']; ?>

Нажав на кнопку, открывается popup блок, но при повторном нажатии на кнопку должен закрываться popup блок, но этого не происходит.

Помогите решить данную проблему.

let currentPopup = null;

function togglePopup(button) {
  const popupItem = button.nextElementSibling;

  if (currentPopup && currentPopup === popupItem && button === currentPopup) {
    popupItem.style.display = 'none';
    currentPopup = null;
  }

  if (currentPopup) {
    currentPopup.style.display = 'none';
  }

  currentPopup = popupItem;
  popupItem.style.display = 'block';
}

document.addEventListener('click', (event) => {
  if (!event.target.closest('.button-item') && !event.target.closest('.popup-item')) {
    if (currentPopup) {
      currentPopup.style.display = 'none';
    }
  }
});

.button-item {
  width: 65px;
  height: 30px;
  cursor: pointer;
}

.popup-item {
  display: none;
  width: 100px;
  height: 45px;
  background-color: var(--White);
  border-radius: 5px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

.delete-item {
  width: 100%;
  height: 35px;
  border: none;
  outline: none;
  background-color: var(--White);
  margin-top: 5px;
}

.delete-item:hover {
  background-color: #f0f0f0;
}

<button class="button-item" data-id="<?php echo $link['id']; ?>" onclick="togglePopup(this)"><span class="material-symbols-outlined">Кнопка</span></button>

<div class="popup-item">
  <form action="index.php" method="post">
    <input type="hidden" name="delete" value="<?php echo $link['short_url']; ?>">
    <button class="delete-item" onclick="this.form.submit();">Удалить</button>
  </form>
</div>

Answer 1

Достаточно в условии:

if (currentPopup && currentPopup === popupItem && button === currentPopup) {
    popupItem.style.display = 'none';
    currentPopup = null;
  }

убрать button === currentPopup и добавить return в конце, чтобы функция завершалась, и следующий за условием код не отрабатывал.

let currentPopup = null;

function togglePopup(button) {
  const popupItem = button.nextElementSibling;
  if (currentPopup) {
    popupItem.style.display = 'none';
    currentPopup = null;
  } else {
    popupItem.style.display = 'block';
    currentPopup = popupItem;
  }
}

document.addEventListener('click', (event) => {
  if (!event.target.closest('.button-item') && !event.target.closest('.popup-item')) {
    if (currentPopup) {
      currentPopup.style.display = 'none';
      currentPopup = null;
    }
  }
});

.button-item {
  width: 65px; height: 30px;
  cursor: pointer;
}

.popup-item {
  display: none;
  width: 100px; height: 45px;
  background-color: var(--White);
  border-radius: 5px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
}

.delete-item {
  width: 100%; height: 35px;
  border: none; outline: none;
  background-color: var(--White);
  margin-top: 5px;
}
.delete-item:hover { background-color: #f0f0f0; }

<button class="button-item" data-id="<?php echo $link['id']; ?>" onclick="togglePopup(this)"><span class="material-symbols-outlined">Кнопка1</span></button>
<div class="popup-item">
  <form action="index.php" method="post">
    <input type="hidden" name="delete" value="<?php echo $link['short_url']; ?>">
    <button class="delete-item" onclick="this.form.submit();">Удалить1</button>
  </form>
</div>

<button class="button-item" data-id="<?php echo $link['id']; ?>" onclick="togglePopup(this)"><span class="material-symbols-outlined">Кнопка2</span></button>
<div class="popup-item">
  <form action="index.php" method="post">
    <input type="hidden" name="delete" value="<?php echo $link['short_url']; ?>">
    <button class="delete-item" onclick="this.form.submit();">Удалить2</button>
  </form>
</div>

БЛОГ НА HUSL

Не закрывается popup блок при повторном нажатии на кнопку

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