切换弹出窗口并在外部单击时切换它

我有一个问题，

我正在尝试制作一个弹出窗口切换toggleClass。不过，我还制定了一条从 StackOverflow 获得的规则，当在外部单击时，弹出窗口会消失。

但是，当我单击登录按钮时，它会出现，但我无法再使用登录按钮使其消失。但我已经定下了规则：

$('a#inloggen').click(function() {
    $('.inloggen').toggleClass('active');
});

不过，他似乎忽略了这一点……

也许你们能发现我看不到的问题是什么。

HTML

<div id="usermenu">
<div class="inloggen"><h2 class=" swe-editable" _sweid="17" _sweclass="nl swe swe-snippet swe-h2 ">
Inloggen</h2>

this is the popup!
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Wachtwoord vergeten? <a href="#">Klik hier</a>.</p></div>

</div>  
<ul class="menu">
  <li class="first"><a href="#" id="inloggen">login</a></li>
</ul>

jQuery

$('a#inloggen').click(function() {
    $('.inloggen').toggleClass('active');
  });

  $(document).mouseup(function (e)
  {
      var container = $('.inloggen');

      if (container.has(e.target).length === 0)
      {
          container.removeClass('active');
      }

  });

  if ($('#project_user_loginform-name').hasClass('error') || $('#project_user_loginform-password').hasClass('error')) {
    $('.inloggen').addClass('active');
  };

---

What have i tried?
I tried to add a exception to the function that makes the div dissapear when clicked outside the div but this just seems to reverse the progress.

var container2 = $('a#inloggen');
if (container.has(e.target).length === 0 && container2.has(e.target).length !== 0)

UPDATE :
我进一步进行了修改，将 mouseup 更改为 mousedown，并更改了函数的顺序。这让我更接近解决方案，但它还不能完美工作。

$(document).mousedown(function (e)
  {
      var container = $('.inloggen');

      if (container.has(e.target).length === 0)
      {
          container.removeClass('active');
      }

  });

  $('a#inloggen').click(function() {
    $('.inloggen').toggleClass('active');
  });

Example
http://codepen.io/anon/pen/ghpwr http://codepen.io/anon/pen/ghpwr

我相信完成您想要做的事情的一种更简单的方法是创建一个可以切换弹出窗口的空白 div。基本上将其隐藏起来，就像弹出窗口一样，当单击登录链接时，将遮罩 div<div class="mask"></div>显示，但在z-index:-1;。这样，页面上的链接仍被识别为链接，但 div 仍可单击。

这是代码的新版本，并实施了建议的更改：link http://codepen.io/anon/pen/ycEpo