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>