Закрыть 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();});