Фокус на вкладке клавиатуры

Question

Я пытаюсь сделать доступное меню навигации с вложенными элементами подменю, проблема, с которой я сталкиваюсь, заключается в том, что, когда табуляция через навигацию выделяет все внутренние ссылки, она не вызывает отображение выпадающего меню; Я не уверен, что это из-за неспособности вызвать фокус или нет, хотя это то, что я подозреваю.

HTML, примерно по линии:

<ul class="sf-menu"> 
<li> Link </li> 
... 
<li> Link 
    <ul> 
    <li> inner link </li> 
    ... 
    </ul> 
</li> 

Тогда мой JQuery является:

$("ul.sf-menu li").focus(function(){ 
this.toggleClass("over"); 
}); 
$("ul.sf-menu li ul").focus(function(){ 
this.toggleClass("over"); 
}); 

Если класс over устанавливает дисплей для блокировки.

EDIT

У меня есть вкладка индексы, объявленные в списке элементов со значением 0.

Answer 1

Справедливо определенного это не то, что вкладка должна делать, но вместо того чтобы использовать JQuery, чтобы добавить класса, вы можете использовать селектор pseado css :focus.

ul.sf-menu li:focus{ /* Code to fold it open */ } 

Answer 2

Вы должны использовать focusin и focusout события, потому что focus и blur события не пузырь.

$('.item').on({ 
 
    'focusin mouseenter': function() { 
 
    $(this).addClass('open'); 
 
    }, 
 
    'focusout mouseleave': function() { 
 
    $(this).removeClass('open'); 
 
    } 
 
});

.item > ul { 
 
    position: fixed; 
 
    right: 100%; 
 
} 
 

 
.item.open > ul { 
 
    position: static; 
 
    right: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="item"> 
 
    <a href="#">1</a> 
 
    <ul> 
 
     <li> 
 
     <a href="#">1.1</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">1.2</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li class="item"> 
 
    <a href="#">2</a> 
 
    <ul> 
 
     <li> 
 
     <a href="#">2.1</a> 
 
     </li> 
 
     <li> 
 
     <a href="#">2.2</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

---

Кроме того, элементы с display: none не может получить фокус, поэтому ваш код:

$("ul.sf-menu li ul").focus(...) 

никогда не может выполнить, даже если вы обновляете использовать focusin событие.