javascript - jquery div 显示和隐藏问题

Question

我有一个问题。当我第一次按下链接 div 显示时，当我按下文档时它消失了。当我第二次按下链接时，div 出现并突然消失。怎么了？

$(function() {
$("#trigger").click(function() {
    $('#toolWrapper').toggle(function() {
        $(document).click(function(event) {
            if (!($(event.target).is('#toolWrapper') || $(event.target).parents('#toolWrapper').length || $(event.target).is('#trigger'))) {
                $('#toolWrapper').hide(500);
                event.preventDefault();
            }
        });
    });
});

});

Answer 1

您已经嵌套了您的回调 - 所以您只是在其他回调中设置您的事件回调。我想这就是导致您出现问题的原因。

在您的触发事件处理程序中，如果您使用 event.stopPropagation(); 那么您可以停止调用文档事件处理程序，因此您不必检查它是否是事件目标.

这就是你想要做的吗？ jsfiddle

[编辑]:添加代码来回答:

$(document).ready(function() {
    $('#toolWrapper').hide();
});

$("#trigger").click(function(event) {
    $('#toolWrapper').show();
    event.stopPropagation();
});

$(document).click(function() {
    if (!$(event.target).is('#toolWrapper') || $(event.target).parents('#toolWrapper').length) {
        $("#toolWrapper").hide(500);
    }
});