Javascript 键盘可访问下拉菜单

我有一个菜单，可以在鼠标悬停（mouseover）上使用。 我想让它在键盘选项卡上工作

我试过以下方法，但在我的情况下不起作用。 我做错了什么

以下是我的Javascript、css和html代码：

$.fn.accessibleDropDown=函数（）
{
var el=$（本）；
/*IE 6的设置下拉菜单*/
$（“li”，el）.mouseover（函数（）{
$（此）.addClass（“悬停”）；
}).mouseout（函数（）{
$（this.removeClass（“hover”）；
});
/*使用键盘访问下拉菜单*/
$（“a”，el）.focus（函数（）{
$（this.parents（“li”）.addClass（“hover”）；
}).blur（函数（）{
$（this.parents（“li”）.removeClass（“hover”）；
});
}
$（文档）.ready（函数（）
{	
$（“.TableInHambMenuBlackBonly”）.accessibleDropDown（）；
});
ul.css3menu1，ul.css3menu1{
列表样式：无；背景色：无；边框宽度：0px；边框样式：透明；显示：内联块；}
ul.css3menu1 ul、.menuHidden{
可见性：隐藏；位置：绝对；右侧：0；顶部：0；不透明度：0；-moz过渡：全部0.5s；-webkit过渡：不透明度0.5s；-o过渡：不透明度0.5s，可见性0.5s；过渡：不透明度0.5s；背景色：#透明；边框半径：0px；-moz边框半径：0px；-webkit边框半径：0px；边距：23px 1px 0；}
ul.css3menu1 li:hover>ul，ul.css3menu1 li:focus>ul，ul.css3menu1 li.hover>ul，.menuVisible{
可见性：可见；不透明度：1；z索引：9999；}
ul.css3menu1 li{
宽度：200px；位置：相对；显示：块；字体大小：0；边框宽度：1px；}
ul.css3menu1 li：悬停{
}
ul.css3menu1 ul{
位置：绝对；右侧：100%；顶部：0；-moz盒阴影：0px 0px 0px 63dbc3；-webkit盒阴影：0px 0px 0px 63dbc3；盒阴影：0px 0px 0px 63dbc3；}
ul.css3menu1{
宽度：20px；字体大小：0；位置：绝对；显示：块；浮点：左；边框半径：0px；-moz边框半径：0px；-webkit边框半径：0px；页边距顶部：4px；}
ul.css3menu1>li{
宽度：25px；边距：-12px 0px 0px；高度：28px；}
ul.css3menu1 a:激活，ul.css3menu1 a:聚焦{
/*大纲样式：无；*/}
ul.css3menu1 a{
显示：块；垂直对齐：中间；文本对齐：左侧；文本装饰：无；字体：12px玫瑰色，Arial，无衬线；颜色：000000；光标：指针；填充：0px 2px；背景色：透明；边框宽度：0px；边框样式：透明；}
ul.css3menu1 ul li{
浮动：右；边距：0px 0px 0px 1px；}
ul.css3menu1 ul a{
文本对齐：右；填充顶部：4px；填充底部：4px；背景色：f6d4b2；边框半径：0px；-moz边框半径：0px；-webkit边框半径：0px；边框底部宽度：1px；边框左侧宽度：1px；字体：12px玫瑰色，Arial色，无衬线；行高：18px；颜色：000000；文本装饰：无；边框样式：纯色；边框颜色：fff；}
ul.css3menu1 li:悬停>a，ul.css3menu1 li:焦点>a，ul.css3menu1 li.悬停a，ul.css3menu1 li.按下{
边框样式：无；颜色：#000000；文本装饰：无；边框样式：纯色；边框颜色：#fff；}
ul.css3menu1 ul li img{
边框：无；垂直对齐：中间；右边距：20px；左边距：5px；浮动：左}
ul.css3menu1跨度{
显示：块；溢出：可见；背景位置：右中心；背景重复：无重复；右填充：0px；}
ul.css3menu1 ul跨度{
文本对齐：右；填充：6px 2px；背景色：#f6d4b2；边框半径：0px；-moz边框半径：0px；-webkit边框半径：0px；字体：12px ROsans，Arial，无衬线；颜色：#000000；文本装饰：无；边框样式：纯色；边框颜色：#fff；边框底宽：1px；边框左宽：1px；}
ul.css3menu1 ul li:悬停>a，ul.css3menu1 ul li:焦点>a，ul.css3menu1 ul li.悬停a，ul.css3menu1 ul li.按下{
背景色：#fbead9；颜色：#000000；文本装饰：无；}
ul.css3menu1 li.topmenu>a{
背景色：#f6d4b2；边框半径：0px；-moz边框半径：0px；-webkit边框半径：0px；}
ul.css3menu1 li.顶部菜单：悬停>a，ul.css3menu1 li.顶部菜单：焦点>a，ul.css3menu1 li.顶部菜单.悬停>a，ul.css3menu1 li.顶部菜单a.按下{
背景色：#f6d4b2；}
ul.css3menu1 ul span img{
边框：无；垂直对齐：中间；右边距：20px；左边距：5px；浮动：左}











jQuery无法捕获“选项卡”。
您可以将以下代码添加到
$.fn.accessibleDropDown=function（）{
，并通过控制台日志记录查看jQuery可以捕获哪些键：

$(document).keypress(function( event ) {
    console.log(event.which); //event.which is the code for the pressed key
});

jQuery无法捕获“TAB”。
您可以将以下代码添加到
$.fn.accessibleDropDown=function（）{
，并通过控制台日志记录查看jQuery可以捕获哪些键：

$(document).keypress(function( event ) {
    console.log(event.which); //event.which is the code for the pressed key
});

您最好使用表单字段的本机焦点事件。您可以从选择列表构建菜单，只需将选择列表从页面中移出即可：

select.menu { position:absolute; left:-9999px; }

选择列表将附带选项卡索引，UL不会。然后，您可以在选择列表上运行以下脚本：

$('select.menu').on('focus', function() {
    //open the menu
});

$('select.menu').on('blur', function() {
    //close the menu when the list is tabbed off
});

您最好使用表单字段的本机焦点事件。您可以从选择列表构建菜单，只需将选择列表从页面中移出即可：

select.menu { position:absolute; left:-9999px; }

选择列表将附带选项卡索引，UL不会。然后，您可以在选择列表上运行以下脚本：

$('select.menu').on('focus', function() {
    //open the menu
});

$('select.menu').on('blur', function() {
    //close the menu when the list is tabbed off
});