Question

我有一个大型菜单，我正在尝试添加键盘辅助功能。从我的（有限的）理解，这应该工作：

$('nav li').focus(function() { $(this).hover() });
$('nav li').hover(
    function() { $(this).addClass('active'); },
    function() { $(this).removeClass('active'); }
);

然而，它没有。 hover()工作正常，但我认为只是将focus()称为另一个触发器，它可以工作，但事实并非如此。即使我把它写出来：

$('nav li').hover(
    function() { $(this).addClass('active'); },
    function() { $(this).removeClass('active'); }
);

$('nav li').focus(
    function() { $(this).addClass('active'); },
    function() { $(this).removeClass('active'); }
);

它仍然不会。我还在学习，所以任何帮助都表示赞赏。此外，还有一种方法可以整合hover＆amp; focus在一个陈述而不是两个陈述中？

谢谢！

//更新

以下是site-in-progress的链接，以便更好地理解。

Answer 1

默认情况下，

li个元素没有focus个事件。您可以通过向相关tabindex元素添加li属性来让他们接受焦点。这应该可以解决您的问题，因为您的代码看起来不错。

有关工作示例，请参阅此fiddle。

另一种选择是使用click事件代替focus，这不需要对li元素进行任何修改，尽管这是否适合您的需求取决于什么你真的想做。

但是，当您在hover和focus事件中运行相同的代码时，为什么还需要focus个事件？

Answer 2

试

$('nav li').focus(function() { $(this).trigger('hover') });

而不是

$('nav li').focus(function() { $(this).hover() });

Answer 3

您网页上的“nav”是什么？如果它是一个类，您可能需要将jquery选择器更改为以下内容：

$('.nav li')

或者也许......

$('li.nav')

...如果CSS类应用于LI元素本身。

Answer 4

使用委托以获得更好的性能。您可以尝试以下代码，希望它可以帮助您。

$('nav').delegate('li', 'focus mouseover', function() { 
  $(this).addClass('active'); 
}).delegate('li', 'blur mouseout', function() { 
  $(this).removeClass('active'); 
});

jQuery Focus（）没响应？

//更新

4 个答案: