1

Estou com um problema no script abaixo, a função myFunction e myFunction1 abrem normalmente o dropdown ao clicar o botão, mas na parte de clicar fora e fechar, apenas o segundo evento está funcionando.

<script>
    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }

    function myFunction1() {
        document.getElementById("myDropdown1").classList.toggle("show");
    }

    // Fechar ao clicar fora - ESSE NÃO FUNCIONA SE ADICIONAR O DE BAIXO
    window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {

        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }

    // Fechar ao clicar fora - ESSE FUNCIONA, MAS O DE CIMA NÃO
    window.onclick = function(event) {
      if (!event.target.matches('.btn-header')) {

        var dropdowns = document.getElementsByClassName("dropdown-content2");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }
    </script>
7
  • 1
    Porquê você sobrescreve o window.onclick quando insere a segunda função. Por quê não trata tudo no mesmo evento?
    – Woss
    30/06/2017 às 17:48
  • Tentei colocar tudo dentro do mesmo evento porém não funcionou do mesmo jeito. 30/06/2017 às 17:58
  • Tem como mostrar como fez?
    – Woss
    30/06/2017 às 17:59
  • Eu tirei o segundo evento, peguei o IF dele e coloquei junto com o primeiro. 30/06/2017 às 18:03
  • Então deveria funcionar.
    – Woss
    30/06/2017 às 18:05

1 Resposta 1

1

Apenas transformando o comentário em resposta. O problema do seu código é atribuir duas vezes o evento window.onclick, assim a segunda atribuição sobrescreve a primeira. É semelhante quando você faz x = 1 e logo depois x = 2. O valor de x será 2 e o valor 1 será perdido. Para contornar o problema, basta fazer as verificações dentro da mesma função:

window.onclick = function(event) {

  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }

  if (!event.target.matches('.btn-header')) {
    var dropdowns = document.getElementsByClassName("dropdown-content2");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }

}

Desta forma as duas verificações serão executadas no evento click.

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 .