jQuery：使用标签在菜单中导航

Question

我想找到一条通用规则，可以帮助我使用Tab键在菜单中导航。 我知道如何捕获选项卡事件，但是有几个问题：

1. 我仅通过按Tab键就无法访问下拉菜单。
2. 下拉菜单的结构不是标准的。 即，隐藏的ul元素可能位于其他元素（例如div）内，或者可能是嵌套在其他下拉菜单内的下拉菜单
3. 使隐藏菜单可见/不可见的事件有所不同。 单击和悬停事件是最受欢迎的。

有人能帮我吗？

Answer 1

您可以在触发下拉列表显示的列表项上使用tabindex属性。 通过按Tab键可以使父级li变得可聚焦。 然后，您可以使用一些CSS和Javascript将规则应用于子项以使其可见。

关于小提琴：

请注意，我使用CSS中的opacity和pointer-events属性来切换下拉菜单的状态。 当元素具有visibility: hidden或display: none应用时，将根本无法聚焦。 由于默认情况下，Tab键将焦点移至下一个可聚焦元素，因此在按Tab键时，目标元素不应将这些属性中的任何一个设置为显示的值。

另外，您还必须在整个导航过程中准确跟踪tabindex。 首先是第一个主锚，然后是封闭的列表项，以使下拉列表可见。 然后进入里面的锚点。 （这是JS必须从CSS接管的地方），这给我们带来了tabindex 5的好处，这时为内部的3个子项分配了tabindex，因此我们将从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>