jquery - jQuery：如果块数很少，则在外部单击时隐藏弹出 div 时出现错误

Question

我有几个弹出块。当您单击链接时，每个都会打开，并且电源被元素中的楔形隐藏。Bug：如果你先点击第二个链接“Link-2”（出现Block-2），然后点击“Link-1”（出现Block-1），点击外部元素时它不会消失.

jsfiddle 上的演示

我的 jQuery 代码

$('.open_btn').click(function(e) {
    $(".p_block").addClass('box_hidden');
    var popup = $(this).attr('href');       
    if ($(popup).hasClass('box_hidden')) {
        $(popup).removeClass('box_hidden');
        var firstClick = true;
        $(document).bind('click.myEvent', function(e) {
            if (!firstClick && $(e).closest($(popup)).length == 0) {
                $(popup).addClass('box_hidden');
                $(document).unbind('click.myEvent');
            }
            firstClick = false;
        });
    }
    e.preventDefault();
});

Answer 1

有一个解决方案。

jsfiddle

$('.open_btn').click(function(e) {
$(".p_block").addClass('box_hidden');
var popup = $(this).attr('href');   
if ($(popup).hasClass('box_hidden')) {
    $(popup).removeClass('box_hidden');
    var firstClick = true;
    $(document).bind('click.myEvent'+popup, function(e) {
        if (!firstClick && $(e).closest($(popup)).length == 0) {
            $(popup).addClass('box_hidden');
            $(document).unbind('click.myEvent'+popup);
        }
        firstClick = false;
    });
}
e.preventDefault();
});