Jquery：使用選項卡在菜單中導航

Question

我想找到一個通用規則，它將幫助我使用選項卡在菜單中導航。我知道如何捕捉標籤事件，但有幾個問題：

1. 有下拉菜單，我不能只加按Tab鍵下拉菜單。
2. 下拉菜單的結構不是標準的。即隱藏的ul元素可以在其他元素（例如div）內，或者可以是在其他下拉菜單內嵌套的下拉菜單
3. 使隱藏菜單可見/不可見的事件變化。點擊和懸停事件是最流行的。

有人可以幫助我嗎？

Answer 1

您可以在列表項上使用觸發顯示下拉列表的tabindex屬性。這將使父母li通過按下標籤進行對焦。然後，您可以使用一些CSS和Javascript將規則應用於兒童，以使其可見。

關於小提琴：

請注意，我用的是opacity和pointer-events性質CSS切換下拉的狀態。當一個元素應用visibility: hidden或display: none時，它根本不會被聚焦。由於Tab鍵默認將焦點帶到下一個可聚焦元素，因此您的目標元素不應該在按Tab鍵時將這些屬性中的任何一個設置爲顯示的值。

此外，您必須準確地跟蹤整個導航中的tabindexes。首先是第一個主要錨點，然後是封閉列表項目，以使下拉菜單可見。然後來到裏面的錨。 （這是JS必須從CSS中接管的點）當3個子項被分配了tabindex時，這會帶給我們tabindex 5，因此我們將繼續從6開始計算下一個主項目的直接<a>子項，等等。

您必須弄清楚如何使您的多級下拉菜單按預期工作，但這是一個起點。您還可以檢查您的腳本中是否有箭頭按鍵，並在回覆中提供另一個元素焦點。

小提琴：

$(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>