Закрыть div на клик или вкладку за пределами

Question

У меня есть страница со стандартным всплывающим меню в заголовке. Спецификации говорят, что пользователь должен иметь возможность закрыть его тремя способами:

1. нажав вне меню
2. , нажав на ссылку, которая расширяет его второй раз (slidetoggle)
3. табулированием снаружи меню

У меня есть первая работающая, но я не могу понять, что другие два. Когда вы нажмете ссылку второй раз, она переместится вверх, а затем сдвинется назад. И я попытался использовать jQuery «focusout», чтобы закрыть меню, когда пользователь выйдет, но не повезло.

Вот мои ЯШ:

$("#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'; 
    }) 
}); 

И вот Fiddle: https://jsfiddle.net/tactics/u4quaje0/2/

Спасибо.

Answer 1

Вы пробовали это для своей второй проблемы?

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

на вашей третьей проблемы, вы пробовали установив атрибут этого меню «0» tabindex? Затем в вашем скрипте добавьте следующее:

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