如何讓我的下拉菜單鍵盤可以訪問？

Question

我有一個下拉菜單，我需要我鍵盤訪問，但不知道如何去做。在我的CSS我有一個：專注於所有的鏈接。我假設在javascript/jquery中使用onfocus會是最好的，而不是將tab鍵硬編碼到JavaScript中，對嗎？如果是這樣，我會怎麼做代碼來使用焦點選擇器？當有人選中它時，菜單需要放棄，然後當它們退出時（或者他們可以按下退出鍵，因爲有超過40個鏈接），它需要關閉（需要像mousingover/mousingout那樣）。 Example Menu

if (ie === "1") { 
if ($(window).width() > 949) { 

$.fn.pause=function(a){$(this).stop().animate({dummy:1},a);return this}; 
function mouseleft(){$("#buttonbar").triggerHandler("mouseleave")} 
$(document).ready(function() 
    {$("#buttonbar").mouseenter(function(){$(this).stop().pause(160).animate({height:"12.7em"},400,"easeOutQuart")}).mouseleave(function(){$(this).stop().pause(160).animate({height:"2.2em"},400,"easeOutQuart")});});$(function(){$("#accordion").accordion({fillSpace:!0,icons:{header:"accordion-header",headerSelected:"accordion-headerselected"}})}); 
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) { 
    $("#buttonbar li").bind('touchstart', function(){ 
     console.log("touch started"); 
    }); 
$("#buttonbar li").bind('touchend', function(){ 
     console.log("touch ended"); 
    }); 
} 
else { 
$("#accordion").accordion({active:false}); 
} 
} 

function showElement(d){ 
    var s=document.getElementById(d).style; 
    if ($(window).width() < 950) { 
    if (s.display != "block") { s.display = "block"; } else { s.display = "none"; } 
    if ($(window).width() > 949) { 
    if (s.display != "block") { s.display = "block"; } 
    } 
} 
} 
function showHide() { 
    var s=document.getElementById("buttonbar").style; 
    if ($(window).width() > 949) { 
    s.display = "block"; 
    document.getElementById("prospective-links").style.display = "block"; 
    document.getElementById("current-links").style.display = "block"; 
    document.getElementById("academic-links").style.display = "block"; 
    document.getElementById("facstaff-links").style.display = "block"; 
    document.getElementById("parent-links").style.display = "block"; 
    document.getElementById("alumni-links").style.display = "block"; 
    document.getElementById("visitor-links").style.display = "block"; 
$("#accordion").accordion('destroy'); 
    $("#buttonbar").unbind('mouseenter'); 
    $("#buttonbar").unbind('mouseleave'); 
$.fn.pause=function(a){$(this).stop().animate({dummy:1},a);return this}; 
function mouseleft(){$("#buttonbar").triggerHandler("mouseleave")} 
$(document).ready(function() 
    {$("#buttonbar").mouseenter(function(){$(this).stop().pause(160).animate({height:"12.7em"},400,"easeOutQuart")}).mouseleave(function(){$(this).stop().pause(160).animate({height:"2.2em"},400,"easeOutQuart")});});$(function(){$("#accordion").accordion({fillSpace:!0,icons:{header:"accordion-header",headerSelected:"accordion-headerselected"}})}); 
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) { 
    $("#buttonbar li").bind('touchstart', function(){ 
     console.log("touch started"); 
    }); 
$("#buttonbar li").bind('touchend', function(){ 
     console.log("touch ended"); 
    }); 
} 

    } 
    else { 
    /*$("#accordion").accordion({active:false});*/ 
    $("#accordion").accordion('destroy'); 
    $("#buttonbar").unbind('mouseenter'); 
    $("#buttonbar").unbind('mouseleave'); 
    $("#buttonbar li").unbind('touchstart'); 
    $("#buttonbar li").unbind('touchend'); 

    s.display = "none"; 
    document.getElementById("prospective-links").style.display = "none"; 
    document.getElementById("current-links").style.display = "none"; 
    document.getElementById("academic-links").style.display = "none"; 
    document.getElementById("facstaff-links").style.display = "none"; 
    document.getElementById("parent-links").style.display = "none"; 
    document.getElementById("alumni-links").style.display = "none"; 
    document.getElementById("visitor-links").style.display = "none"; 
    /*$("#buttonbar").accordion('destroy');*/ 

    } 

} 
$(window).resize(showHide); //Run when resized 

jQuery(function($) { 
    var path = location.pathname.substring(1); 
    $('#nav a[href$="' + path + '"]').addClass('active'); 
}); 

// This section makes the skip to anchor links such as the skip to content link work in webkit browsers like Chrome and Safari 
(function(linkList,i,URI) { 
    if (!!(URI = document.documentURI)) { 
     URI = URI.split('#')[0]; 
     document.addEventListener("DOMContentLoaded", function() { 
     document.removeEventListener("DOMContentLoaded", arguments.callee, false); 
     linkList = document.links; 
     for (i in linkList) { 
      if (!!linkList[i].hash) { 
       if (linkList[i].hash.match(/^#./)) { 
        if ((URI+linkList[i].hash)==linkList[i].href){ 
        linkList[i].addEventListener("click", function(e,f,g) { 
         f = document.getElementById(this.hash.slice(1)); 
         if (!(g = f.getAttribute('tabIndex'))) f.setAttribute('tabIndex',-1); 
         f.focus(); 
         if (!g) f.removeAttribute('tabIndex'); 
        }, false); 
        } 
       } 
      } 
     } 
     }, false); 
    } 
    return true; 
})(); 
} 
else { 
function showElement(d){ 
    var s=document.getElementById(d).style; 
    if (s.display != "block") { s.display = "block"; } else { s.display = "none"; } 
}; 


}; 

的HTML如下：

<div id="buttonbar"> 
    <ul id="bar"> 
    <li id="prospective" class="rightborder"><a>Future Students</a> 
    <ul id="prospective-links"> 
     <li><a href="/admissions">Undergraduate Admissions</a></li> 
     <li><a href="/graduate">Graduate Admissions</a></li> 
     <li><a href="/admissions/international">International Admissions</a></li> 
     <li><a href="/transfer">Transfer Admissions</a></li> 
     <li><a href="/advising-center">Academic Advising Center</a></li> 
     <li><a href="/financial_aid">Financial Assistance</a></li> 
     <li><a href="/info/schedules/tuition">Tuition and Fees</a></li> 
     <li><a href="#">Test Item 8</a></li> 
     <li class="last-item"><a href="/prospective">Go to Future Students</a></li> 
    </ul></li> 
     <li id="students" class="rightborder"><a href="/current">Current Students</a> 
     <ul id="current-links"> 
      <li><a href="/info/calendars/academic">Academic Calendar</a></li> 
      <li><a href="/info/schedules">Enrollment Schedule</a></li> 
      <li><a href="/studentservices">Student Life</a></li> 
      <li><a href="/housing">Housing</a></li> 
      <li><a href="/financial_aid/workstudy.html">On-Campus Jobs</a></li> 
      <li><a href="#">Bookstore</a></li> 
      <li><a href="#">Athletics</A></li> 
      <li class="fill"><a name="hold">&nbsp;</a></li> 
      <li class="last-item"><a href="/current">Go to Current Students</a></li> 
     </ul></li> 
    </ul> 
    </div> 

Answer 1

嘗試使用tabIndex的鏈接。 （但steveaz指出他們應該已經可調焦）

$('#buttonbar a').attr('tabIndex', 0); 

對於你不得不以及添加事件作爲tabIndex菜單。 $menu是你的菜單（S），我不知道那是什麼，調整到自己需要的選擇：

$('#bar').attr('tabIndex', 0) 
    .focus(function() { $menu.show(); }) 
    .keydown(function(e) { e.which == 27 && $menu.hide(); }) // ESC 
    .blur(function() { $menu.hide(); }); 

Answer 2

我會嘗試像...給你的按鈕欄Tab鍵索引然後綁定對焦/模糊函數來顯示和隱藏的按鈕欄菜單

$(document).load(function(){ 

    $('#buttonbar').attr('tabIndex', 0).on({ 
     focus: function(){ 
      $("#buttonbar").triggerHandler("mouseenter"); 
     }, 
     blur: function(){ 
      $("#buttonbar").triggerHandler("mouseleave"); 
     } 
    }); 

});