Javascript 如何使下拉菜单键盘可访问？_Javascript_Jquery_Drop Down Menu_Accessibility

Javascript 如何使下拉菜单键盘可访问？

javascript jquery drop-down-menu

Javascript 如何使下拉菜单键盘可访问？,javascript,jquery,drop-down-menu,accessibility,Javascript,Jquery,Drop Down Menu,Accessibility,我有一个下拉菜单，我需要我是键盘访问，但不知道如何做到这一点。在我的css中，我对所有链接都有a:关注。我假设在javascript/jquery中使用onfocus是最好的，而不是将tab键硬编码到javascript中，对吗？如果是这样，我将如何处理代码以使用焦点选择器？当有人点击菜单时，菜单需要下降，当他们点击菜单时（或者他们可以按escape键，因为有40多个链接），菜单需要关闭（需要与鼠标悬停/鼠标悬停时一样） if（即==“1”）{ 如果（$（窗口）.width（）>949）{ $.

我有一个下拉菜单，我需要我是键盘访问，但不知道如何做到这一点。在我的css中，我对所有链接都有a:关注。我假设在javascript/jquery中使用onfocus是最好的，而不是将tab键硬编码到javascript中，对吗？如果是这样，我将如何处理代码以使用焦点选择器？当有人点击菜单时，菜单需要下降，当他们点击菜单时（或者他们可以按escape键，因为有40多个链接），菜单需要关闭（需要与鼠标悬停/鼠标悬停时一样）

if（即==“1”）{
如果（$（窗口）.width（）>949）{
$.fn.pause=function（a）{$（this.stop（）.animate（{dummy:1}，a）；返回this}；
函数mouseleft（）{$（“#buttonbar”）.triggerHandler（“mouseleave”）}
$（文档）.ready（函数（）
{$（“#buttonbar”）.mouseenter（function（）{$（this）.stop（）.pause（160）.动画（{height:“12.7em”}，400，“easeOutQuart”）}）.mouseleave（function（）{$（this）.stop（）.pause（160）.动画（{height:“2.2em”}，400，“easeOutQuart”）}）；$（function（）{$（“#手风琴”）.手风琴（{fillSpace 0，图标：{header:{header:“手风琴头”，headerSelected:}）；
if（（navigator.userAgent.match（/iPhone/i））| |（navigator.userAgent.match（/iPod/i））| |（navigator.userAgent.match（/iPad/i）））{
$（“#buttonbar li”）.bind（'touchstart'，function（）{
console.log（“触摸启动”）；
});
$（“#buttonbar li”）.bind（'touchend'，function（）{
控制台日志（“触摸结束”）；
});
}
否则{
$（“#手风琴”）。手风琴（{active:false}）；
}
}
功能显示元素（d）{
var s=document.getElementById（d）.style；
如果（$（窗口）.width（）<950）{
如果（s.display！=“block”）{s.display=“block”}其他{s.display=“none”}
如果（$（窗口）.width（）>949）{
如果（s.display！=“block”）{s.display=“block”}
}
}
}
函数showHide（）{
var s=document.getElementById（“buttonbar”）.style；
如果（$（窗口）.width（）>949）{
s、 display=“block”；
document.getElementById（“预期链接”）.style.display=“block”；
document.getElementById（“当前链接”）.style.display=“块”；
document.getElementById（“学术链接”）.style.display=“block”；
document.getElementById（“facstaff链接”）.style.display=“block”；
document.getElementById（“父链接”）.style.display=“块”；
document.getElementById（“校友链接”）.style.display=“block”；
document.getElementById（“访问者链接”）.style.display=“block”；
美元（“#手风琴”）。手风琴（‘销毁’）；
$（“#按钮栏”）.unbind（'mouseenter'）；
$（“#按钮栏”）.unbind（'mouseleave'）；
$.fn.pause=function（a）{$（this.stop（）.animate（{dummy:1}，a）；返回this}；
函数mouseleft（）{$（“#buttonbar”）.triggerHandler（“mouseleave”）}
$（文档）.ready（函数（）
{$（“#buttonbar”）.mouseenter（function（）{$（this）.stop（）.pause（160）.动画（{height:“12.7em”}，400，“easeOutQuart”）}）.mouseleave（function（）{$（this）.stop（）.pause（160）.动画（{height:“2.2em”}，400，“easeOutQuart”）}）；$（function（）{$（“#手风琴”）.手风琴（{fillSpace 0，图标：{header:{header:“手风琴头”，headerSelected:}）；
if（（navigator.userAgent.match（/iPhone/i））| |（navigator.userAgent.match（/iPod/i））| |（navigator.userAgent.match（/iPad/i）））{
$（“#buttonbar li”）.bind（'touchstart'，function（）{
console.log（“触摸启动”）；
});
$（“#buttonbar li”）.bind（'touchend'，function（）{
控制台日志（“触摸结束”）；
});
}
}
否则{
/*$（“#手风琴”）。手风琴（{active:false}）*/
美元（“#手风琴”）。手风琴（‘销毁’）；
$（“#按钮栏”）.unbind（'mouseenter'）；
$（“#按钮栏”）.unbind（'mouseleave'）；
$（“#buttonbar li”）.unbind（'touchstart'）；
$（“#buttonbar li”）.unbind（'touchend'）；
s、 display=“无”；
document.getElementById（“预期链接”）.style.display=“无”；
document.getElementById（“当前链接”）.style.display=“无”；
document.getElementById（“学术链接”）.style.display=“无”；
document.getElementById（“facstaff链接”）.style.display=“无”；
document.getElementById（“父链接”）.style.display=“无”；
document.getElementById（“校友链接”）.style.display=“无”；
document.getElementById（“访问者链接”）.style.display=“无”；
/*美元（“#钮扣巴”）。手风琴（‘销毁’）*/
}
}
$（窗口）。调整大小（显示隐藏）；//调整大小后运行
jQuery（函数（$）{
var path=location.pathname.substring（1）；
$（'#nav a[href$=“+path+”）.addClass（'active'）；
});
//本节使“跳到锚定”链接（如“跳到内容”链接）在诸如Chrome和Safari之类的webkit浏览器中起作用
（函数（链接列表、i、URI）{
如果（！！（URI=document.documentURI））{
URI=URI.split（“#”）[0]；
document.addEventListener（“DOMContentLoaded”，function（））{
removeEventListener（“DOMContentLoaded”，arguments.callee，false）；
linkList=document.links；
对于（链接列表中的i）{
if（！！链接列表[i].散列）{
if（linkList[i].hash.match（/^#./）{
if（（URI+linkList[i].hash）==linkList[i].href）{
链接列表[i]。添加的事件列表器（“单击”），函数（e、f、g）{
f=document.getElementById（this.hash.slice（1））；
如果（！（g=f.getAttribute（'tabIndex'））f.setAttribute（'tabIndex'），-1）；
f、 焦点（）；
如果（！g）f.removeAttribute（'tabIndex'）；
}，假）；
}
}
}
}
}，假）；
}
返回true；
})();
}
否则{
功能显示元素（d）{
var s=document.getElementById（d）.style；
如果（s.display！=“block”）{s.display=“block”}其他{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>













    <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>


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

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

$(document).load(function(){

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

});