添加jQuery焦點和模糊菜單的輔助功能

Question

我用jQuery創建了一個簡單的下拉菜單。它響應懸停事件正常工作。我也希望它能夠響應焦點和模糊事件來支持鍵盤用戶。事件綁定到一個元素，並且我已經將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); 
}); 

任何技巧，結合我失蹤了懸停事件？

小提琴： 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(); 
} 

的問題是，當display/hide功能正在燒製的focus/blur事件時，功能上下文是<a>元件，因此您的函數中的this關鍵字引用了錯誤的元素，而不是您父親<li>（如hover） d。