Question

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

有下拉菜单，我不能只按Tab键。
下拉菜单的结构不是标准的。即隐藏的ul元素可能位于其他元素（例如div）内，或者可能是其他下拉菜单中的嵌套下拉菜单
使隐藏菜单可见/不可见的事件会有所不同。点击和悬停事件是最受欢迎的。

有人能帮助我吗？

Answer 1

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

关于小提琴：

请注意，我使用CSS中的opacity和pointer-events属性来切换下拉列表的状态。如果某个元素已应用visibility: hidden或display: none，则根本无法调整焦点。由于tab键默认将焦点带到下一个可聚焦元素，因此目标元素不应该在按Tab键的位置将这些属性设置为显示的值。

此外，您必须在整个导航过程中准确跟踪tabindex。首先是第一个主锚，然后是封闭列表项，以使下拉列表可见。然后来到那里的锚。（这是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>

Jquery：使用选项卡在菜单中导航

1 个答案: