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

嗯，我看到你复制那个位的地方了。为你改变它，所以它现在有效：

$(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/

Answer 2

为文档注册单击处理程序而不是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

在鼠标悬停之间切换隐藏和显示以及隐藏div

2 个答案: