jQuery下拉菜单，选项卡可访问性

Question

在这里小提琴：http://jsfiddle.net/emJcx/1/

我有一个简单的下拉菜单，在悬停时隐藏。我希望通过使用Tab键可以访问此下拉菜单。使用此代码：

$("li.trigger a").focus(function(){ 
    $(this).parent().find('ul').show();
});

我已启用下拉列表以显示头部链接焦点。

模糊变得有点复杂。我试过这个：

$("li.trigger ul li:last-child a").blur(function(){ 
    $(this).parent().parent().hide();
});

但它只适用于前向标签，而不适用于后退标签（shift-tabs）。

我也尝试过这样的事情：

$('li.trigger').has('a:focus').find('ul').toggle();

但自然这不起作用。

关于这如何运作的任何想法。

非常感谢。

Answer 1

我有这个为你工作：http://jsfiddle.net/emJcx/24/

它可能不是最佳解决方案，但这就是我所做的：

1. 您将focus事件限制为触发类，但您的li标签之一没有该类，所以我暂时将其删除。您可能希望稍微按下这一点，因为此时它将针对页面上的每个li运行。
2. 我更改了代码以隐藏所有子ul代码，然后再显示您当前所在的代码。这样，当您将选项卡切换回父菜单项并远离给定子菜单的父项时，它将消失。
3. 我删除了您的blur事件，因为当从最后一个项目移回标签时会导致问题。功能保持不变，因为额外的隐藏实际上会处理这个问题。

新代码很简单：

$("li a").focus(function(){
  $(this).parent().parent().find('ul').hide();
  $(this).parent().find('ul').show();
});