在外部单击或选项卡时关闭 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();});