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 标记，然后再显示您当前所在的标记。这样，当您按 Shift 键返回到父菜单项并离开给定子菜单的父菜单时，它就会消失。
3. 我删除了您的 blur 事件，因为当按 Shift-Tab 键退出最后一项时，它会导致出现问题。功能保持不变，因为额外的隐藏实际上解决了这个问题。

新代码很简单:

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