javascript - Jquery:使用选项卡在菜单中导航

Question

我想找到一个通用规则来帮助我使用 Tab 在菜单中导航。我知道如何捕捉标签事件，但有几个问题:

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

有人可以帮助我吗？

Answer 1

您可以在触发显示下拉列表的列表项上使用 tabindex 属性。这将使 parent 成为li按 T​​ab 键可聚焦。然后，您可以使用一些 CSS 和 Javascript 将规则应用于子项以使其可见。

关于 fiddle :

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

此外，您还必须在整个导航过程中准确跟踪标签索引。首先是第一个主 anchor ，然后是封闭的列表项，以使下拉列表可见。然后把 anchor 放在里面。 (这是 JS 必须接管 CSS 的地方)当里面的 3 个子项被分配了一个 tabindex 时，这将我们带到 tabindex 5，所以我们将继续从 6 开始计算下一个主要元素的直接 <a>。 child 等等。

您必须自己想出使多级下拉菜单按预期工作的方法，但这是一个起点。您还可以检查脚本中的箭头键按下情况，并给予另一个元素焦点作为响应。

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>