Question

我试图在下拉菜单中进行周期性标记。

这是我的JSFiddle：https://jsfiddle.net/Lc7saks3/

<nav id="primary_nav_wrap">
  <div>
    <ul>
      <li tabindex="0"><a href="#">Menu</a>
        <ul>
          <li><a href="#">Option 1</a></li>
          <li><a href="#">Option 2</a></li>
          <li><a href="#">Option 3</a></li>
          <li><a href="#">Option 4</a></li>
          <li><a href="#">Option 5</a></li>
        </ul>
      </li>
    </ul>  
  </div>
  <br />
  <br />  
  <input type="text" />
</nav>

单击Menu元素，然后选择选项。

目前，标签遍历下拉菜单中的5个选项，然后转到输入元素。

如何才能使下拉选项重新标记，周期性地，从选项1开始，一旦达到最后一个选项（选项5）？

Answer 1

您需要在Jeff L.时使用脚本listen for the Tab key，并在按下时立即on the last item返回第一项（或者当您到达时动态调整tabindex值最后一项）。

然而，不要这样做，因为它构成键盘陷阱，并且是WCAG 2.0项目2.1.2 move focus的失败。有一种冗长的处理方法，基本上说不做你想做的事：No Keyboard Trap

最后，我建议您从tabindex取消li，因为这不是一个互动/可操作的控件，而且tabindex没有位置。

如何循环选择列表项目

1 个答案: