0

Existem vários botões, que ao clicar, abre-se uma caixa com opções. Como eu faço pra que quando eu abrir uma caixa, as outras se fechem?

var button = document.querySelectorAll(".popup-btn")
var pop = document.querySelectorAll(".popup")
var li = document.querySelectorAll("li")



button.forEach(item => {
  item.addEventListener('click', () => {

    let popup = document.getElementById("popup-" + event.target.dataset.itemid);
    popup.classList.toggle("visible");

  })
})


li.forEach(item => {
  item.addEventListener('click', () => {

    let alvo = document.getElementById("alvo-" + event.target.dataset.alvo);
    alvo.value = event.target.innerHTML

    let popup = item.parentNode;
    popup.classList.toggle("visible");

  })
})
.container {
  position: relative;
}

.popup {
  position: absolute;
  display: none;
}

.popup.visible {
  display: block;
}
<div class="container">
  <button class="popup-btn" data-itemid="1"> Button 1</button>
  <input type="text" id="alvo-1">
  <div id="popup-1" class="popup">
    <li data-alvo="1">item 1</li>
    <li data-alvo="1">item 2</li>
    <li data-alvo="1">item 3</li>
  </div>
</div>



<div class="container">
  <button class="popup-btn" data-itemid="2"> Button 2</button>
  <input type="text" id="alvo-2">
  <div id="popup-2" class="popup">
    <li data-alvo="2">item 1</li>
    <li data-alvo="2">item 2</li>
    <li data-alvo="2">item 3</li>
  </div>
</div>

Tentei usar o forEach dentro do button, mas não funcionou

jsfiddle

2 Respostas 2

1

Como você já possui as popups cacheadas em var pop... basta percorrer esta lista e remover a classe visible antes de exibir a popup alvo.

var button = document.querySelectorAll(".popup-btn")
var pop = document.querySelectorAll(".popup")
var li = document.querySelectorAll("li")

button.forEach(item => {
  item.addEventListener('click', () => {

    pop.forEach(popup => {
      popup.classList.remove("visible");
    });
    
    let popup = document.getElementById("popup-" + event.target.dataset.itemid);
    popup.classList.toggle("visible");
  })
})


li.forEach(item => {
  item.addEventListener('click', () => {

    let alvo = document.getElementById("alvo-" + event.target.dataset.alvo);
    alvo.value = event.target.innerHTML

    let popup = item.parentNode;
    popup.classList.toggle("visible");

  })
})
.container {
  position: relative;
}

.popup {
  position: absolute;
  display: none;
}

.popup.visible {
  display: block;
}
<div class="container">
  <button class="popup-btn" data-itemid="1"> Button 1</button>
  <input type="text" id="alvo-1">
  <div id="popup-1" class="popup">
    <li data-alvo="1">item 1</li>
    <li data-alvo="1">item 2</li>
    <li data-alvo="1">item 3</li>
  </div>
</div>



<div class="container">
  <button class="popup-btn" data-itemid="2"> Button 2</button>
  <input type="text" id="alvo-2">
  <div id="popup-2" class="popup">
    <li data-alvo="2">item 1</li>
    <li data-alvo="2">item 2</li>
    <li data-alvo="2">item 3</li>
  </div>
</div>

O problema desse método é que se você adicionar novas popups e botões dinamicamente, estes não irão funcionar, neste caso sugiro criar uma nova função para esconder as popups e dentro desta função obter a lista de popups com document.querySelectorAll(".popup")

var button = document.querySelectorAll(".popup-btn")
var li = document.querySelectorAll("li")

function hidePopus() {
  document.querySelectorAll(".popup").forEach(popup => {
     popup.classList.remove("visible");
  });
}


button.forEach(item => {
  item.addEventListener('click', () => {

    hidePopus();
    
    let popup = document.getElementById("popup-" + event.target.dataset.itemid);
    popup.classList.toggle("visible");
  })
})


li.forEach(item => {
  item.addEventListener('click', () => {

    let alvo = document.getElementById("alvo-" + event.target.dataset.alvo);
    alvo.value = event.target.innerHTML

    hidePopus();

  })
})
.container {
  position: relative;
}

.popup {
  position: absolute;
  display: none;
}

.popup.visible {
  display: block;
}
<div class="container">
  <button class="popup-btn" data-itemid="1"> Button 1</button>
  <input type="text" id="alvo-1">
  <div id="popup-1" class="popup">
    <li data-alvo="1">item 1</li>
    <li data-alvo="1">item 2</li>
    <li data-alvo="1">item 3</li>
  </div>
</div>



<div class="container">
  <button class="popup-btn" data-itemid="2"> Button 2</button>
  <input type="text" id="alvo-2">
  <div id="popup-2" class="popup">
    <li data-alvo="2">item 1</li>
    <li data-alvo="2">item 2</li>
    <li data-alvo="2">item 3</li>
  </div>
</div>

2
  • Opa, muito obrigado! mas nesse caso, se eu clicar novamente no button e o popup estiver aberto, ele não fecha, existe um modo de contornar isso?
    – Marcel
    25/06/2019 às 19:58
  • Basta checar no click do botão se o popup correspondente possui a classe visible e se tiver removê-la e dar um return para encerrar a execução. 25/06/2019 às 20:04
0

Podes simplificar e escutar eventos diretamente no container:

containers.forEach(item => {
  item.addEventListener('click', (e) => {
    item.querySelector('.popup').classList.toggle("visible");
  })
})

Nesse caso ele faz .toggle independentemente de onde clicares...

const containers = document.querySelectorAll(".container")
var pop = document.querySelectorAll(".popup")
var li = document.querySelectorAll("li")

containers.forEach(item => {
  item.addEventListener('click', (e) => {
    item.querySelector('.popup').classList.toggle("visible");
  })
})


li.forEach(item => {
  item.addEventListener('click', (event) => {
    let alvo = document.getElementById("alvo-" + event.target.dataset.alvo);
    alvo.value = event.target.innerHTML;
  })
})
.container {
  position: relative;
}

.popup {
  position: absolute;
  display: none;
}

.popup.visible {
  display: block;
}
<div class="container">
  <button class="popup-btn" data-itemid="1"> Button 1</button>
  <input type="text" id="alvo-1">
  <div id="popup-1" class="popup">
    <li data-alvo="1">item 1</li>
    <li data-alvo="1">item 2</li>
    <li data-alvo="1">item 3</li>
  </div>
</div>



<div class="container">
  <button class="popup-btn" data-itemid="2"> Button 2</button>
  <input type="text" id="alvo-2">
  <div id="popup-2" class="popup">
    <li data-alvo="2">item 1</li>
    <li data-alvo="2">item 2</li>
    <li data-alvo="2">item 3</li>
  </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .