jquery - 在外部单击或选项卡时关闭 div

Question

我在页眉中有一个非常标准的弹出菜单。规范说用户需要能够以三种方式关闭它：

1. 通过单击菜单外
2. 通过单击第二次展开它的链接（滑动切换）
3. 通过在菜单外点击

我有第一个工作，但我似乎无法弄清楚其他两个。当您再次单击该链接时，它会向上滑动，然后再向下滑动。而且我尝试使用jquery“focusout”在用户退出时关闭菜单，但没有运气。

这是我的js：

$("#body").mouseup(function (e) {
    var subject = $("#shell-user-account-details");
    if (e.target.id != subject.attr('id') && !subject.has(e.target).length) {
        subject.hide();
    }
    $("#shell-user-account-details").attr('aria-hidden', function (i, attr) {
        return attr == 'true' ? 'false' : 'true';
    }).attr('aria-expanded', function (i, attr) {
        return attr == 'false' ? 'true' : 'false';
    });
});

$(document).on('click', '#shell-user-account-link', function (event) {
    $('#shell-user-account-details').slideToggle().attr('aria-expanded', function (i, attr) {
        return attr == 'false' ? 'true' : 'false';
    }).attr('aria-hidden', function (i, attr) {
        return attr == 'false' ? 'true' : 'false';
    })
});

这是一个小提琴：https ://jsfiddle.net/tactics/u4quaje0/2/

谢谢。

Answer 1

您是否尝试过解决第二个问题？

     $("#idofyourlink").click(function(){$("#idofyourpopup").toggle();})

关于第三个问题，您是否尝试过tabindex将该菜单的属性设置为“0”？然后在您的脚本中，添加以下内容：

     $("#idofyourmenu").blur(function(){$("#idofyourpopup").hide();});