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将显示设置为阻止。

修改

我确实在list元素上声明了值为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事件，

也永远无法执行。

专注于键盘选项卡

2 个答案: