ocultando DIV al hacer clic fuera de él

Question

Intento básicamente hacer un menú desplegable simple con html, css y jquery y estoy teniendo problemas para cerrar el div cuando un usuario hace clic fuera de él.

intenté stopPropagation y vinculé una acción al documento cuando hice clic, o no funcionan o no tengo ni idea de cómo usarlos. de todos modos tener una mirada en el código de abajo

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"); 
}); 

cualquier ayuda sería muy appriciated.

Answer 1

Debe utilizar stopPropagation:

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

Answer 2

Usted podría utilizar on(), tal vez:

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

aún no probado Lo anterior, sino que, creo que el trabajo.