Question

我有一个像bootstrap这样的大型下拉菜单（简化代码）：

<li class="dropdown mega-dropdown">
   <a href="#">Menu Button</a>
   <ul tabindex="-1">
      <li>1st Link</li>
      <li>2nd Link</li>
      <!-- many other links -->
   </ul>
   <!-- many other menu buttons -->
</li>

这里的小提琴：https://jsfiddle.net/48m2ppzc/

我想用tab键简化导航：

元素<ul>的开头max-height为0px，因此我无法使用Tab键在其中导航（因为菜单已隐藏）。< / LI>
当我点击“菜单按钮”链接时，菜单应显示（我将max-height设置为500px），我需要将tabindex更改为“0”（我可以做它与JQuery，所以这不是一个问题）

问题出在第一点：tabindex="-1"不起作用，我仍然可以使用Tab键在菜单中导航。

如何解决此问题？我使用HTML5，因此tabindex应该适用于所有HTML元素，我也尝试使用tabindex="0"。

Answer 1

tabindex不会被元素的子元素继承，因此您需要在所有项目上手动设置它：

<li class="dropdown mega-dropdown">
   <a href="#">Menu Button</a>
   <ul>
      <li><a href="#" tabindex="-1">1st Link</a></li>
      <li><a href="#" tabindex="-1">2nd Link</a></li>
      <!-- many other links -->
   </ul>
   <!-- many other menu buttons -->
</li>

由于这可能与辅助功能相关，因此在语义上也可以使用aria-hidden属性（并在可见时切换它）：

<li class="dropdown mega-dropdown">
   <a href="#">Menu Button</a>
   <ul aria-hidden="true">
      <li><a href="#" tabindex="-1">1st Link</a></li>
      <li><a href="#" tabindex="-1">2nd Link</a></li>
      <!-- many other links -->
   </ul>
   <!-- many other menu buttons -->
</li>

<ul>上的tabindex =“ - 1”不起作用

1 个答案: