点击时隐藏DIV

Question

我基本上试着用html、css和jquery制作一个简单的下拉菜单，当用户单击div时，Im很难关闭div。

我尝试过stopPropagation并在单击时将一个操作绑定到文档，它们要么无法工作，要么我不知道如何使用它们。无论如何，请看下面的代码

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

以上这些还没有经过检验，但我认为应该奏效。