nascondere DIV quando si fa clic su di esso

Question

In pratica sto cercando di creare un semplice menu a discesa con html, css e jquery e ho problemi a chiudere il div quando un utente fa clic su di esso.

ho provato stopPropagation e associare un'azione al documento quando si fa clic, non funzionano o non ho idea di come usarli. comunque dare un'occhiata al codice qui sotto

HTML

<div id="optionsMenu"> 
    <a href="account.php?edit=info">Account Settings</a>  
</div> 

JQuery

$('.options').click(function(){ 
    if($('#optionsMenu').css("display") == 'none'){ 
     $('#optionsMenu').slideDown("fast"); 
    } 

    else{ 
     $('#optionsMenu').slideUp("fast"); 
    } 
}); 

$('#optionsMenu').blur(function(){ 
    $('#optionsMenu').css("display","none"); 
}); 

qualsiasi aiuto sarebbe molto appriciated.

Answer 1

Si dovrebbe usare stopPropagation:

$(body).click(function(e) 
{ 
    $('#optionsMenu').slideUp('fast'); 
}); 
$('#optionsMenu').click(function(e) 
{ 
    e.stopPropagation(); 
}); 

Answer 2

Si potrebbe utilizzare on(), forse:

$('body').on('click', function(e){ 
    if ($(e.target).not('#optionsMenu')){ 
     $('#optionsMenu').slideUp('fast'); 
    } 
}); 

Quanto sopra non ancora testato, ma dovrebbe, penso che il lavoro.