當離開它時隱藏DIV

Question

我基本上試圖做一個簡單的下拉菜單與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'); 
    } 
}); 

以上尚未測試，但應該，我覺得工作。