在这里摆弄: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();
但这自然是行不通的。
关于如何运作的任何想法。
非常感谢。
最佳答案
我有这个为你工作:http://jsfiddle.net/emJcx/24/
这可能不是最佳解决方案,但这是我所做的:
- 您将
focus
事件限制为触发器类,但您的一个li
标记没有该类,因此我暂时将其删除。您可能需要稍微按下此按钮,因为此时它将针对页面上的每个 li 运行。 - 我更改了代码以隐藏所有子
ul
标记,然后再显示您当前所在的标记。这样,当您按 Shift 键返回到父菜单项并离开给定子菜单的父菜单时,它就会消失。 - 我删除了您的
blur
事件,因为当按 Shift-Tab 键退出最后一项时,它会导致出现问题。功能保持不变,因为额外的隐藏实际上解决了这个问题。
新代码很简单:
$("li a").focus(function(){
$(this).parent().parent().find('ul').hide();
$(this).parent().find('ul').show();
});
关于jQuery 下拉菜单、选项卡可访问性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8509352/