скрывает DIV при нажатии на него

Question

Im в основном пытается создать простую выпадающую меню с html, css и jquery и им возникают проблемы с закрытием div, когда пользователь нажимает на него.

Я попробовал stopPropagation и привязал действие к документу при нажатии, они либо не работают, либо я не знаю, как их использовать. в любом случае, посмотрите на код ниже

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

любая помощь будет намного appriciated.

Answer 1

Вы должны использовать stopPropagation:

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

Answer 2

Вы можете использовать on(), возможно:

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

выше еще не тестировался, но должен, я думаю, что работа.