點擊遠離它時隱藏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");
});

任何幫助都會很有幫助。

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

以上尚未測試，但應該，我認為工作。