将jQuery焦点和模糊添加到菜单中以实现可访问性

Question

我使用jQuery创建了一个简单的下拉菜单。它可以很好地响应悬停事件。我还希望它能响应焦点和模糊事件，以支持键盘用户。事件绑定到a元素，为了浏览器兼容性，我在a元素中添加了tabindex值。但是，当主要元素获得键盘焦点时，菜单不会打开。

HTML:

  <ul class="mainmenu">
     <li><p><a href="#" tabindex="1">Cruises</a></p>
        <ul class="submenu">
           <li><a href="#">Whale watching</a></li>
           <li><a href="#">Birding</a></li>
           <li><a href="#">Dinner</a></li>
           <li><a href="#">School field trips</a></li>
        </ul>
     </li>
     <li><p><a href="#" tabindex="2">Rates</a></p>
        <ul class="submenu">
           <li><a href="#">Children (0-17)</a></li>
           <li><a href="#">Adults</a></li>
           <li><a href="#">Seniors (60+)</a></li>
           <li><a href="#">Groups</a></li>
        </ul>
     </li>
     <li><p><a href="#" tabindex="3">Directions</a></p>
        <ul class="submenu">
           <li><a href="#">From the north</a></li>
           <li><a href="#">From the south</a></li>
           <li><a href="#">From the east</a></li>
        </ul>
     </li>
  </ul>

jQuery:

function display() {
   $(this).children("ul").show();
}
function hide() {
   $(this).children("ul").hide();   
}

$(function(){
   $("ul.mainmenu li").hover(display,hide);
   $("ul.mainmenu li a").focus(display);
   $("ul.mainmenu li a").blur(hide);
});

有什么技巧可以绑定到我错过的悬停事件吗？

Fiddle：http://jsfiddle.net/shameless/bw6GJ/

Answer 1

试试这个：

function display() {
   var $this = $(this)
   var $ul = $this.children("ul");
   if (!$ul.length)
        $ul = $this.parents('li:first').children('ul');
   $ul.show();
}
function hide() {
   var $this = $(this)
   var $ul = $this.children("ul");
   if (!$ul.length)
        $ul = $this.parents('li:first').children('ul');
   $ul.hide();   
}

问题是，当为focus/blur事件激发display/hide函数时，函数上下文是<a>元素，因此函数中的this关键字指的是错误的元素，而不是您想要的父<li>(如hover(。