jQuery 检测非表单元素（导航菜单项）是否有焦点

Question

在主页上，我有一个菜单栏在页面加载时是不可见的（即在可见区域上方的屏幕外），一旦滚动位置超过 50 像素，它就会从顶部向下移动（动画）显示为常规（固定）导航菜单栏。这是用 jQuery 完成的。当页面完全向上滚动到顶部时，菜单栏再次移动 up/disappears。

但是出于可访问性的原因，当有人多次使用 Tab 键聚焦和 select 该导航栏中的菜单项（无需滚动）时，菜单也应该出现。

作为第一次测试，我尝试了这个功能：

jQuery(document).ready(function() { 
    jQuery('#menu-item-55').focus(function() {
                 alert("yes!");
    });
});

（稍后应触发将菜单带入页面可见区域的动画）

如果我在获得焦点的表单字段上使用此测试功能，但它不适用于导航菜单中的 link，显然是因为 focus() 仅适用于表单元素。

有什么方法可以使 link 也适用，或者有任何其他方法可以让我检测 link 上的焦点吗？

Answer 1

自己刚刚找到答案：

focus() 对链接无效，但 focusin() 有效 !

Answer 2

如果您使用的是 jQuery 1.6+，那么您可以使用 :focus 选择器

$(document).ready(function() {
    if ($('#menu-item-55').is(':focus')) {
        alert("yes!");
    });
});

jQuery detect if non-form element (nav menu item) has focus