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 键从最后一项移回时，它会导致问题。功能保持不变，因为额外的隐藏实际上解决了这个问题。

新代码很简单：

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