如何將鍵盤焦點設置爲表示列表的父元素

Question

我有一個簡單的實現通過鍵盤輸入的下拉菜單，我使用HTML/CSS和其事件通過JS/jQuery控制。

通過鍵盤輔助功能的目標是像這樣：

1. 導航下拉通過按標籤鍵菜單元素。
2. 按向下箭頭鍵打開專注菜單。
3. 在這樣的菜單中，按標籤鍵將幫助您瀏覽菜單元素。
4. 在這樣的菜單中，按下esc鍵將關閉下拉菜單。
5. 菜單關閉後，將鍵盤焦點保持在菜單的表示父元素上。

這裏是jsFiddle我作爲一個完全成熟的實現的例子。

問題出現在jQuery代碼中，最後一條語句就是我試圖確定解決方案的地方（請參閱下文）。

我的問題： 我如何使它所以當ESC鍵被按下關閉下拉菜單;我回到下拉菜單的父元素，我首先通過下拉箭頭鍵訪問下拉菜單元素？原因是，在我的實現中，如果我們退出下拉菜單，我們實際上是要求用戶選擇他們所在的元素。

這是我試圖通過嘗試（和失敗）將焦點設置爲剛纔訪問的父元素來解決的意外行爲。

任何幫助非常感謝！

HTML

<ul class="menu"> 
    <li> 
     <a href="#">Menu Elem</a> 
     <div class="subMenu"> 
      <ul> 
       <li> 
        <a href="#">Sub Menu Elem</a> 
       </li> 
       <li> 
        <a href="#">Sub Menu Elem</a> 
       </li> 
       <li> 
        <a href="#">Sub Menu Elem</a> 
       </li> 
      </ul> 
     </div> 
    </li> 
    <li> 
     <a href="#">Menu Elem</a> 
     <div class="subMenu"> 
      <ul> 
       <li> 
        <a href="#">Sub Menu Elem</a> 
       </li> 
       <li> 
        <a href="#">Sub Menu Elem</a> 
       </li> 
       <li> 
        <a href="#">Sub Menu Elem</a> 
       </li> 
      </ul> 
     </div> 
    </li> 
    <li> 
     <a href="#">Menu Elem</a> 
     <div class="subMenu"> 
      <ul> 
       <li> 
        <a href="#">Sub Menu Elem</a> 
       </li> 
       <li> 
        <a href="#">Sub Menu Elem</a> 
       </li> 
       <li> 
        <a href="#">Sub Menu Elem</a> 
       </li> 
      </ul> 
     </div> 
    </li> 
</ul> 

CSS

.menu > li { 
    display: inline-block; 
    text-align: center; 
    color: white; 
    background-color: orange; 
    width: 100px; 
    height: 70px; 
     position: fixed; 
} 

.menu > li:hover { 
    cursor: pointer; 
} 
.menu > :nth-child(1) { 
    left: 1px; 
} 
.menu > :nth-child(2){ 
    left: 102px; 
} 

.menu > :nth-child(3){ 
    left: 203px; 
} 
.menu > li > a { 
    line-height: 70px; 
} 
.menu > li > .subMenu { 
    display: none; 
    width: 200px; 
    margin-top: 1px; 
    outline: 1px solid black; 
} 
.menu > li > .subMenu > ul > li { 
    height: 100px; 
    background-color: green; 
    margin-left: -40px; 
    line-height: 100px; 
} 
.menu > li > .subMenu > ul > li:hover { 
    background-color: purple; 
    cursor: pointer; 
} 
a { 
    text-decoration: none; 
    color: white; 
} 

JS/jQuery的

$(document).ready(function(){ 
    var menuElem = $(".menu > li"); 

    $(menuElem).hover(function(){ 
     $(this).find(".subMenu").toggle(); 
    }); 

    $(menuElem).keydown(function(e) { 
     // down arrow key 
     if(e.keyCode === 40 && $(this).find(".subMenu").is(":hidden")){ 
      $(this).find(".subMenu").toggle(); 
     } 
     // esc key 
     else if(e.keyCode === 27 && $(this).find(".subMenu").is(":visible")){ 
      $(this).find(".subMenu").toggle(); 

      // ***** problematic code here ***** 
      // Need to target the <a> element, or the <li> element, or the <div>, or the <ul> element, not sure which one will work. 
      // Currently: trying to get whichever element represents the selected menu, in the below case the anchor element 

      $(menuElem).eq($(this).index()).find("a").addClass("selected"); 
     } 
    }); 
}); 

Answer 1

你可以嘗試將焦點設置給母公司a元素，通過使用.focus()