jQuery发现父母是否失去了“关注点”
我坚持要弄清楚使下拉菜单键盘可访问的逻辑。
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 hoverIntent插件就能很好地工作。
问题是，目前这只适用于鼠标。
下一个挑战是让它通过键盘工作。
我可以很容易地将焦点事件添加到顶级链接，然后触发二级菜单：
$('ul.primaryMenuItem a:first').focus([call showMenu function]) 这很好用。
要关闭菜单，一个选项是，当打开另一个菜单时，检查是否已经打开了另一个菜单，如果已经打开，则将其关闭。
这也很好用。
然而，失败的地方是如果你打开了最后一个菜单，并按tab键离开了它。由于您尚未切换到其他菜单，因此此菜单将保持打开状态。
挑战是弄清楚如何/何时关闭菜单以及弄清楚它所需的逻辑(jQuery)。理想情况下，当焦点在页面上的某个元素上而不是菜单的任何子元素上时，我会关闭菜单。
从逻辑上讲，我要找的是：
$('li.primaryMenuItem').blur([close $(this).find('ul.popUpMenu'))但是，您不能这样做，因为LI实际上没有焦点，而是其中的锚标记。
有什么建议吗？
更新：
也许有一个更好/更简单的方式来问这个问题：
通过jQuery，有没有办法“观察”焦点是否移出了某个特定对象的所有子对象？
回答 7
Stack Overflow用户
发布于 2010-02-04 08:06:44
您可以使用事件冒泡来检查焦点在事件上的焦点。我成功地使用了以下代码：
$("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');
}
});你可以(应该)让它更优化，但它是有效的。
Stack Overflow用户
发布于 2010-02-04 06:35:53
使用新的jQuery1.4函数：focusin和focusout，而不是blur和focus。focusout的不同之处如下：
当一个元素或其中的任何元素失去焦点时，将焦点输出事件发送到该元素。这与模糊事件的不同之处在于，它支持检测父元素的焦点丢失(换句话说，它支持事件冒泡)。
Stack Overflow用户
发布于 2012-01-12 11:02:22
如果你这样做会怎么样：
$('#link_A_id, #link_A_id > *').focusout(function () {
if ($(document.activeElement).closest('#link_A_id').length == 0)
//focus is out of link A and it's children
});https://stackoverflow.com/questions/2195877
复制相似问题
腾讯云开发者
