jQuery 判断父级是否丢失 'focus'

Question

我一直致力于找出使下拉菜单键盘可访问的逻辑。

HTML 的结构如下(为了清晰起见，使用了额外的类名称):

<ul>
    <li class="primaryMenuItem">
        <a href="">Link 1</a>
        <ul class="popUpMenu">
            <li><a href="">Sub Link 1</a></li>
            <li><a href="">Sub Link 2</a></li>
        </ul>
    </li>
    <li class="primaryMenuItem">
        <a href="">Link 2</a>
        <ul class="popUpMenu">
            <li><a href="">Sub Link 1</a></li>
            <li><a href="">Sub Link 2</a></li>
        </ul>
    </li>    
</ul>

链接 1 和链接 2 悬停时，将显示子菜单列表(下拉菜单)。我用一些 jQuery 和 jQuery hideIntent 插件就可以很好地工作。

问题是目前这只适用于鼠标。

下一个挑战是通过键盘使其发挥作用。

我可以轻松地将焦点事件添加到顶级链接，然后触发二级菜单:

$('ul.primaryMenuItem a:first').focus([call showMenu function]) 

效果很好。

要关闭菜单，一种选择是在打开另一个菜单时检查是否已打开另一个菜单，如果有，则将其关闭。

这也很好用。

然而，如果您打开了最后一个菜单，然后按 Tab 键退出，则失败。由于您尚未切换到另一个菜单，因此该菜单保持打开状态。

挑战在于弄清楚如何/何时关闭菜单以及解决该问题所需的逻辑(jQuery)。理想情况下，当焦点位于页面上除菜单的任何子元素之外的元素上时，我会关闭菜单。

从逻辑上讲，我正在寻找这个:

$('li.primaryMenuItem').blur([close $(this).find('ul.popUpMenu'))

但是，您不能这样做，因为 LI 实际上没有焦点，而是其中的 anchor 标记。

有什么建议吗？

更新:

也许是更好/更简单的提问方式:

通过 jQuery，有没有一种方法可以“观察”焦点是否已移至特定对象的所有子对象之外？

Answer 1

您可以使用事件冒泡来检查 focusin 事件上有哪些焦点。我使用以下代码取得了成功:

$("li:has(ul.popUpMenu)").focusin(function(e) {
    $(this).children().fadeIn('slow');
  });
  $('body').focusin(function(e) {
    if (!$(e.target).parent().is('ul.popUpMenu li')) {
      $('ul.popUpMenu').fadeOut('slow');
    }
  });

您可能(应该)对其进行更优化，但它确实有效。