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

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

点击远离它时隐藏DIV

2 个答案: