我一直坚持要弄清楚下拉菜单键盘可以访问的逻辑.
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])
这很好.
要关闭菜单,一个选项是,当打开另一个菜单时,检查是否已经打开另一个菜单,如果是,则关闭它.
这也很好.
但是,如果你打开了最后一个菜单,那么它就会失败.由于您没有标记到另一个菜单,这个菜单保持打开状态.
挑战在于弄清楚如何/何时关闭菜单以及需要的逻辑(jQuery)来弄清楚它.理想情况下,当焦点位于页面上的元素上时,我会关闭菜单,而不是任何菜单的子元素.
逻辑上,我正在寻找这个：
$('li.primaryMenuItem').blur([close $(this).find('ul.popUpMenu'))
但是,您不能这样做,因为LI实际上没有焦点,而是其中的锚标记.
有什么建议么？
更新：
也许是一个更好/更简单的问题提问方式：
通过jQuery,有没有办法“观察”以查看焦点是否移动到特定对象的所有子节点之外？
解决方法
您可以使用事件冒泡来检查焦点事件的焦点.我使用以下代码取得了成功：
$("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');
}
});
你可以(应该)使它更优化,但它的工作原理.
