当离开它时隐藏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'); 
    } 
}); 

以上尚未测试，但应该，我觉得工作。