JQuery: Навигация в меню с помощью вкладки

Question

Я хочу найти общее правило, которое поможет мне перемещаться по меню, используя вкладку. Я знаю, как поймать вкладку, но есть несколько проблем:

1. Есть раскрывающееся меню, в котором я не могу нажимать только клавишу Tab.
2. Структура выпадающих меню не является стандартной. то есть скрытые ul-элементы могут находиться внутри других элементов (например, div) или могут быть вложенными раскрывающимися меню внутри других выпадающих меню.
3. События, которые делают видимыми/невидимыми скрытые меню, изменяются. Наиболее популярными являются события нажатия и наведения.

Может кто-нибудь мне помочь?

Answer 1

Вы можете использовать атрибут tabindex в элементе списка, который запускает показ вашего раскрывающегося списка. Это приведет к тому, что родительский li будет сфокусирован нажатием на вкладку. Затем вы можете с помощью CSS и Javascript применять правила для детей, чтобы сделать их видимыми.

О скрипке:

Обратите внимание, что я использую opacity и pointer-events свойства в CSS для переключения состояний в раскрывающемся списке. Когда элемент имеет visibility: hidden или display: none, он не будет фокусироваться вообще. Поскольку по умолчанию ключ вкладки привязывает фокус к следующему настраиваемому элементу, ваш целевой элемент не должен иметь ни одного из этих свойств, установленных для показанных значений в момент нажатия клавиши табуляции.

Кроме того, вам необходимо точно отслеживать tabindexes во всей навигации. Первый - это первый основной якорь, затем включающий элемент списка, чтобы сделать раскрывающийся список видимым. Затем вставьте в него якоря. (это тот момент, когда JS должен перехватить CSS). Это приводит нас к tabindex 5, когда 3 subItems внутри назначаются tabindex, поэтому мы продолжим считать с 6 для прямого дочернего <a> следующего основного элемента и так далее ,

Вам нужно будет выяснить, как сделать ваши многоуровневые выпадающие списки работать должным образом, но это отправная точка. Вы можете дополнительно проверить свой скрипт на нажатия клавиш со стрелками и дать ответ другому элементу.

Fiddle:

$(function() { 
 
    $('nav').on('focus', '.dropdown a', function() { 
 
    $(this).closest('.mainItem').addClass('focus'); 
 
    }).on('blur', '.dropdown a', function() { 
 
    $(this).closest('.mainItem').removeClass('focus'); 
 
    }); 
 
});

nav > ul { 
 
    display: flex; 
 
} 
 

 
nav ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
nav .mainItem { 
 
    position: relative; 
 
    margin: 0 5px; 
 
    padding: 0.5rem; 
 
    background-color: #eee; 
 
} 
 

 
nav .dropdown { 
 
    position: absolute; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 100%; 
 
    opacity: 0; 
 
    pointer-events: none; 
 
} 
 
nav .mainItem:hover .dropdown, 
 
nav .mainItem:focus .dropdown, 
 
nav .mainItem.focus .dropdown, 
 
nav .mainItem > a:hover .dropdown, 
 
nav .mainItem > a:focus .dropdown 
 
nav .mainItem.focus .dropdown { 
 
    opacity: 1; 
 
    pointer-events: all; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <ul> 
 
    <li class="mainItem" tabindex="2"><a href="#" tabindex="1">Parent 1</a> 
 
     <ul class="dropdown"> 
 
     <li><a href="#" tabindex="3">Child 1</a></li> 
 
     <li><a href="#" tabindex="4">Child 2</a></li> 
 
     <li><a href="#" tabindex="5">Child 3</a></li> 
 
     </ul> 
 
    </li> 
 
    
 
    <li class="mainItem" tabindex="7"><a href="#" tabindex="6">Parent 2</a> 
 
     <ul class="dropdown"> 
 
     <li><a href="#" tabindex="8">Child 1</a></li> 
 
     <li><a href="#" tabindex="9">Child 2</a></li> 
 
     <li><a href="#" tabindex="10">Child 3</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>