在鼠标上移时在隐藏和显示和隐藏 div 之间切换

Question

我有一个登录链接，点击它会显示一个 div。单击链接时，我想在该 div 的隐藏和显示之间切换。此外，一旦用户在 div 之外单击，我还需要隐藏 div。

我所做的如下所示：

$(document).ready(function() {
    $("#poplink").click(function() {
        $('#popup').toggle();
    });
    $(document).mouseup(function(e) {
        var container = $("#popup");
        if (!container.is(e.target) && container.has(e.target).length === 0) { // if the target of the click isn't the container...
            // ... nor a descendant of the container
            container.hide();
        }
    });
});

现在的问题是我无法在隐藏和显示之间切换。当我在 div 外部单击时，它完美地隐藏了。

谁能帮我解决这个问题。 FIDDLE

Answer 1

为文档注册一个点击处理程序而不是 mouseup

$(document).ready(function () {
    $("#poplink").click(function (e) {
        e.stopPropagation();
        $('#popup').toggle();
        $('#regpopup').hide();
    });

    $(document).click(function (e) {
        var container = $("#popup");
        if (!container.is(e.target) // if the target of the click isn't the container...
        &&
        container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            container.hide();
        }
    });

});

演示：Fiddle

Answer 2

嗯，我知道你在哪里复制了那段内容。为您更改了它，现在它可以工作了：

$(document).ready(function()
{
  $("#poplink").click(function(e)
  {
    e.stopPropagation();
    $('#popup').toggle();
    $('#regpopup').hide();
  });
  $("*:not(#poplink)").click(function (e) {
    var container = $("#popup");
    if (!container.is(e.target) && container.has(e.target).length === 0)
    {
      container.hide();
    }
  });
});

还有 JSFiddle：http://jsfiddle.net/f9Ywh/8/