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>
<li>
?