關閉點擊或標籤外div

Question

我有一個頁面，標題中有一個非常標準的彈出菜單。該規範說，用戶需要能夠關閉它在三個方面：通過點擊菜單

之外點擊，通過Tab鍵之外擴展它第二次（的slideToggle）

鏈接

1. 菜單

我有第一個工作，但我似乎無法弄清楚其他兩個。當您再次點擊該鏈接時，它會向上滑動，然後滑回。我試過使用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();}) 

你的第三個問題，你有沒有嘗試設置該菜單的「0」的tabindex屬性？然後在您的腳本中，添加以下內容：

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