专注于键盘选项卡

Question

我正在尝试使用嵌套的子菜单项制作可访问的导航菜单，我遇到的问题是，虽然通过导航键突出显示所有内部链接，但它不会触发下拉菜单的显示；我不确定这是否是由于未能触发焦点造成的，尽管我怀疑是这样。

html 大致如下：

<ul class="sf-menu">
 <li> Link </li>
 ...
 <li> Link
   <ul>
    <li> inner link </li>
    ...
   </ul>
 </li>

那么我的 jQuery 是：

$( "ul.sf-menu li").focus(function(){
 this.toggleClass("over");
});
$( "ul.sf-menu li ul").focus(function(){
 this.toggleClass("over");
});

over 类将显示设置为阻止。

编辑

我确实在值为 0 的列表元素上声明了选项卡索引。

Answer 1

相当肯定这不是 tab 应该做的，但你可以使用 pseado css 选择器:focus，而不是使用 jQuery 添加一个类。

ul.sf-menu li:focus{ /* Code to fold it open */ }

Answer 2

您应该使用focusin 和focusout 事件，因为focus 和blur 事件不会冒泡。

$('.item').on({
  'focusin mouseenter': function () {
    $(this).addClass('open');
  },
  'focusout mouseleave': function () {
    $(this).removeClass('open');
  }
});

.item > ul {
  position: fixed;
  right: 100%;
}

.item.open > ul {
  position: static;
  right: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="item">
    <a href="#">1</a>
    <ul>
      <li>
        <a href="#">1.1</a>
      </li>
      <li>
        <a href="#">1.2</a>
      </li>
    </ul>
  </li>
  <li class="item">
    <a href="#">2</a>
    <ul>
      <li>
        <a href="#">2.1</a>
      </li>
      <li>
        <a href="#">2.2</a>
      </li>
    </ul>
  </li>
</ul>

---

此外，带有display: none 的元素无法获得焦点，因此您的代码：

$("ul.sf-menu li ul").focus(...)

永远无法执行，即使您更新为使用focusin 事件。