我一直致力于找出使下拉菜单键盘可访问的逻辑。
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,有没有一种方法可以“观察”焦点是否已移至特定对象的所有子对象之外?
最佳答案
您可以使用事件冒泡来检查 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');
}
});
您可能(应该)对其进行更优化,但它确实有效。
关于jQuery 判断父级是否丢失 'focus',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2195877/