1

Tem uma li com a id 'user-login-menu' que quando clicada abre uma div com um sub-menu, mas só é possível fechá-la clicando novamente na li. Gostaria que fosse possível fechar a div clicando tanto na li, quanto fora dela.

Já tentei com e.stoppropagation() mas não funcionou, talvez eu tenha aplicado de forma errada, ficaria grato se alguém pudesse ajudar.

$('#user-login-menu').click(function() {
  $('.dropdown-login').fadeToggle(200, function() {
  });
});
#user-login-menu {
  cursor: pointer;
}

.dropdown-login {
  display: none;
  position: absolute;
  top: 70px;
  right: 0;
  background: #fff;
  width: auto;
  height: auto;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: rgba(0,0,0,0.3);
}

.dropdown-login li  {
  display: block;
  background: #fff;  
  border: 0;
  width: auto;
  height: auto;
  float: none;
}

.dropdown-login li:hover  {
  background: red;  
}

.dropdown-login li a {
  padding: 0 25px 0 25px;
  text-align: left;
  color: #000;
  font-size: 16px;
  line-height: 40px;
  display: block;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

.dropdown-login li a:hover {
  color: #fff;
}
<li id="user-login-menu"><a>Avatar</a></li>
   <div class="dropdown-login">
      <li><a href="/login/">Login</a></li>
      <li><a href="/registrar/">Registrar</a></li>
   </div>

2
  • Você quer que ela feche clicando em qualquer lugar da tela que não a própria <li>? Commented 22/03/2017 às 18:10
  • Sim, fechar clicando na li ou em qualquer lugar fora dela Commented 22/03/2017 às 18:12

2 Respostas 2

1

Adicione um evento de clique no body do documento que fecha sua div:

$(window).click(function() {
    $('.dropdown-login').fadeOut(200);
});

E um outro evento de clique pra parar a propagação:

$('#user-login-menu').click(function(event){
    event.stopPropagation();
});
6
  • Funcionou em parte, ele fecha clicando fora, mas também está abrindo. Alguma sugestão? Commented 22/03/2017 às 18:34
  • @GabrielSouza tente agora. Troquei o evento pelo 'hide'. Commented 22/03/2017 às 19:32
  • Eu até tinha tentado com o hide, o problema é que ele cria uma animação diferente, como se fosse um slide, eu gostaria de manter a animação do fadeToggle Commented 22/03/2017 às 20:02
  • E se usar o .fadeOut(200)? Commented 23/03/2017 às 2:12
  • Funcionou, valeu! Edita na resposta que eu marco como aceita Commented 23/03/2017 às 3:26
0

Use a função .not() do jQuery.

Ela serve para que você exclua elementos de uma seleção. Então, se você fizer assim:

$('body').not('.dropdown-login').click(function(){

        $('.dropdown-login').fadeToggle(200, function() {});

});

Qualquer elemento clicado executará o que estiver na função click, exceto a div ou elemento que você colocar no .not()

3
  • Infelizmente não funcionou Commented 22/03/2017 às 19:59
  • Atualizei o código. Aquele era só de exemplo, agora é adaptado ao que você está tentando. Copie ele e tente. Commented 22/03/2017 às 20:05
  • Não funcionou, a div abre quando clica fora e quando clico na li a div fica abrindo e fechando Commented 22/03/2017 às 21:50

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 .