jQuery弄清楚父母是否失去了“注意力" [英] jQuery figuring out if parent has lost 'focus'

问题描述

我坚持弄清楚使下拉菜单键盘可访问的逻辑.

I'm stuck on figuring out the logic to make a drop down menu keyboard accessible.

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

The HTML is structured as such (extra class names used for clarity):

<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 hoverIntent插件正常工作.

Link 1 and Link 2, when hovered, will show the sub-menu lists (pull down menu). I have this working just fine with some jQuery and the jQuery hoverIntent plugin.

要注意的是，目前这仅适用于鼠标.

The catch is that this only works with the mouse at the moment.

下一个挑战是通过键盘使其工作.

Next challenge is to get this to work via the keyboard.

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

I can easily add a focus event to the top level links that then trigger the secondary menus:

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

那很好.

要关闭菜单，一个选项是，当打开另一个菜单时，检查是否已经有另一个打开，如果是，则将其关闭.

To close the menu, one option is to, when opening another menu, check to see if there is another open already and, if so, close it.

那也很好.

但是，如果您没有打开最后一个菜单并在其中跳出标签，那将是失败的地方.由于您尚未选择其他菜单，因此该菜单保持打开状态.

Where that fails, however, is if you have the last menu open, and tab out of it. Since you haven't tabbed into another menu, this one stays open.

面临的挑战是弄清楚如何/何时关闭菜单以及所需的逻辑(jQuery).理想情况下，当焦点位于除菜单的任何子元素之外的其他页面上的元素上时，我将关闭菜单.

The challenge is to figure out how/when to close the menu and the logic needed (jQuery) to figure it out. Ideally, I'd close the menu when the focus is on an element on the page OTHER than any of the menu's child elements.

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

Logically, I'm looking for this:

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

但是，您不能这样做，因为LI实际上并不具有焦点，而是其中的定位标记.

However, you can't do that, since the LI doesn't actually have focus, but rather the anchor tag within it.

有什么建议吗?

更新:

也许是一种更好/更简单的方法来提出问题:

perhaps a better/simpler way to ask the question:

通过jQuery，有没有一种方法可以观察"以查看焦点是否已移出特定对象的所有子对象?

Via jQuery, is there a way to 'watch' to see if focus has moved outside of all children of a particular object?

推荐答案

您可以使用事件冒泡检查哪些焦点集中在focusin事件上.我成功使用了以下代码:

You can use event bubbling to check what has focus on the focusin event. I had success with the following code:

$("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');
    }
  });

您可以(应该)对其进行优化，但是它可以工作.

You could(should) probably make it more optimized, but it works.

这篇关于jQuery弄清楚父母是否失去了“注意力"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！