点击远离它时隐藏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');
    }
});

以上尚未测试，但应该，我认为工作。