Как настроить фокус клавиатуры на представляющий родительский элемент списка

Question

У меня есть простая реализация по доступности через ввод с клавиатуры в списке выпадающих меню, которые я создал с помощью HTML/CSS и чьи события контролируются с помощью JS/jQuery ,

Цель доступности через клавиатуру примерно так:

1. Navigate выпадающих элементы меню, нажимая на закладки ключа.
2. Нажмите стрелка вниз ключ, чтобы открыть сфокусированное меню.
3. В этом меню нажатие клавиши Tab поможет вам перемещаться по элементам меню.
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()