2

Olá.

Como faço para que essa div fique oculta quando clico fora dela:

inserir a descrição da imagem aqui

Preciso que ela desapareça quando clicar fora dela.

Segue um exemplo parecido:

$("body").on("click", function() {
   $(".passageiros-div").slideUp("slow/400/fast");
});
.passageiros-div {
  border: 1px solid #000;
}
<!DOCTYPE html>
<html>
<head>
	<title>Teste</title>
</head>
<body>
  <div class="passageiros-div">
    <p>Titulo</p>
  </div>
  <div>
    <h1>Frase de Teste</h1>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
</body>
</html>

Repare que quando clico dentro da ela tambem some, precisava que ela sumisse somente quando clico fora dela.

Alguem sabe como fazer isso com jQuery?

1
  • 1
    Opa fala ai, então cara, tenta colocar o título da sua pergunta mais descritivo, tenta colocar também o código HTML para facilitar do pessoal reproduzir. Commented 8/06/2017 às 18:10

2 Respostas 2

2

Tens de ter um auscultador de eventos no document e quando houver um click verificar se o event.target foi dentro do elemento que tens. Podes usar o .contains() que verifica se um elemento contem outro.

Por exemplo assim:

var divNome = document.querySelector(".div-nome");
$(document).on("click", function(e) {
  var fora = !divNome.contains(e.target);
  if (fora) $(divNome).slideDown("slow/400/fast");
  console.log(fora ? 'Fora!' : 'Dentro!');
});


$(divNome).on("click", function(e) {
  $(this).slideUp("slow/400/fast");
});
.div-nome {
  padding: 30px;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div-nome">Clica aqui, ou fora</div>

4
  • Como fazer com que a div oculte somente quando clico fora dela?
    – Enio
    Commented 8/06/2017 às 18:24
  • @Newtech troca o lugar de slideDown e slideUp no meu código...
    – Sergio
    Commented 8/06/2017 às 18:25
  • 1
    Funcionou. Obrigado!!
    – Enio
    Commented 8/06/2017 às 18:27
  • @Newtech ótimo!
    – Sergio
    Commented 8/06/2017 às 18:27
1

Somente clicando fora da div

$(document).mouseup(function(e) 
{
    var container = $(".passageiros-div");

    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<body>
  <div class="passageiros-div">
<p>Paragrafo dentro da div a ser ocultada</p>
  </div>
  <div>
<h1>titulo fora da div a ser ocultada</h1>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
</body>

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 .