在

Question

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

1. 点击菜单外
2. 单击第二次展开的链接（slidetoggle）
3. 通过菜单外的标签

我有第一个工作，但我似乎无法弄清楚其他两个。当您再次单击该链接时，它会向上滑动，然后向下滑动。我尝试过使用jquery＆＃34; focusout＆＃34;当用户选中时，让菜单关闭，但没有运气。

这是我的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属性设置为＆＃34; 0＆＃34;？然后在您的脚本中添加以下内容：

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