ẩn DIV khi nhấp chuột ra khỏi nó

Question

Về cơ bản, tôi cố gắng tạo một menu thả xuống đơn giản với html, css và jquery và gặp sự cố khi đóng div khi người dùng nhấp vào nó.

Tôi đã thử stopPropagation và ràng buộc một hành động với tài liệu khi được nhấp, chúng không hoạt động hoặc tôi không biết cách sử dụng chúng. nào có một cái nhìn vào mã bên dưới

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

bất kỳ trợ giúp sẽ được appriciated nhiều.

Answer 1

Bạn nên sử dụng stopPropagation:

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

Answer 2

Bạn có thể sử dụng on(), có lẽ:

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

Trên đây chưa được thử nghiệm, nhưng nên, tôi nghĩ rằng công việc.