Drop down menu zurb基础顶杆下拉列表无法从键盘访问 我把网站与WCAG 2兼容，基于TopBar，我对TopBar有问题。

它不能用键盘操作，我说的只是“tab”键

我的父项设置为“#”：

项目1（#）

-->项目2（链接）

-->项目3（链接）

在使用“tab”键选择项目1后，什么也没有发生，按enter键将没有帮助

将“菜单”更改为“可单击”这不是一个选项，因为单击另一个菜单后项目不会折叠

手机菜单很好，所以在基础文档中有例子。

下面是一个例子：

---

谢谢你的帮助

这不是一个及时的答案，但由于我在谷歌上搜索同一个问题并提出了自己的解决方案，我想我会发布它：

1） 将tabindex=0添加到导航中的所有链接

2） css中的所有悬停都需要具有等效的焦点选择器。您还需要添加一个hover类，以便可以使用javascript告诉它何时弹出。我在css中添加了这一点以显示菜单（您还应该输入样式的其他等效代码——任何悬停样式都需要焦点样式，但我的样式是定制的，因此我不想发布样式）：

3） 添加了javascript，它接受我创建的带有css的“hover”类，并在焦点改变时添加和删除它。我用这个网站作为参考

---

现在可以通过键盘上的tab键和shift键访问它。它可能需要添加一个跳过导航IMO。

这不是一个及时的答案，但由于我在谷歌上搜索同一个问题并提出了自己的解决方案，我想我会发布它：

1） 将tabindex=0添加到导航中的所有链接

2） css中的所有悬停都需要具有等效的焦点选择器。您还需要添加一个hover类，以便可以使用javascript告诉它何时弹出。我在css中添加了这一点以显示菜单（您还应该输入样式的其他等效代码——任何悬停样式都需要焦点样式，但我的样式是定制的，因此我不想发布样式）：

3） 添加了javascript，它接受我创建的带有css的“hover”类，并在焦点改变时添加和删除它。我用这个网站作为参考

---

现在可以通过键盘上的tab键和shift键访问它。它可能需要添加一个skip nav IMO。

我在这里回答了一个非常类似的问题：源代码不同，但问题是相同的。它没有真正的帮助。我在问ZURB基金会的解决方案，而不是制作全新的菜单。我认为这是关于对zurb的js进行修改的。我理解这一点，但根据另一个答案：这不是一个好的起点。不幸的是，你几乎必须重新开始，彻底检查源HTML并做很多键盘控制操作。也许我应该指定我使用基于WordPress基础的回想主题。我尝试了一些基于引导的主题（示例中是openstrap），下拉菜单也不能用keybord操作，但在使用名为“键盘可访问下拉菜单”的插件后，就可以了。不过，即使经过修改，它也不适用于幻想。我已将[role=“navigation”]更改为[class=“top bar”]和[.top bar]以及更多内容。在我的例子中，使用“tab”键的菜单就可以了。我在这里回答了一个非常类似的问题：源代码不同，但问题是相同的。这并没有真正的帮助。我在问ZURB基金会的解决方案，而不是制作全新的菜单。我认为这是关于对zurb的js进行修改的。我理解这一点，但根据另一个答案：这不是一个好的起点。不幸的是，你几乎必须重新开始，彻底检查源HTML并做很多键盘控制操作。也许我应该指定我使用基于WordPress基础的回想主题。我尝试了一些基于引导的主题（示例中是openstrap），下拉菜单也不能用keybord操作，但在使用名为“键盘可访问下拉菜单”的插件后，就可以了。不过，即使经过修改，它也不适用于幻想。我已将[role=“navigation”]更改为[class=“top bar”]和[.top bar]以及更多内容。在我的例子中，使用“tab”键的菜单就可以了。为这个做了一个jsbin——并且包括了一个更新，它似乎是在我上一次处理这个问题时添加的（你还需要css中的“position:static！important”为这个做了一个jsbin——并且包括了一个更新，它似乎是在我上一次处理这个问题时添加的（你还需要“position:static！important”在css中

.top-bar-section .has-dropdown.hover > .dropdown,
.top-bar-section .has-dropdown.not-click:focus > .dropdown,
.no-js .top-bar-section .has-dropdown:focus > .dropdown,
.dropdown.hover
  {
      display: block; }

$(document).ready(function(){
    $.fn.accessibleDropDown = function ()
    {
        var el = $(this);
        /* Make dropdown menus keyboard accessible */

        $("a", el).focus(function() {
            if($(this).parent().hasClass('has-dropdown')){
                $(this).parent().find('.dropdown').addClass('hover');
            }
            else if(($(this).parent().parent().hasClass('dropdown') === false)){
                $(document).find('.dropdown').removeClass('hover');
            }
        }).keydown(function(e){
            //if tab is pressed but not shift
            if(e.keyCode == 9 && !e.shiftKey){
                //and element is the last child in menu
                if($(this).parent().is(':last-child')){
                    $(this).parent().parent().removeClass('hover');
                }
            }
        });
    }

    //adds keyboard control to navigation
    $('nav').accessibleDropDown();

    $(document).click(function(){
        //if someone uses keyboard and switches to mouse close menu if mouse click isn't focused on a navigation element 
        if($('nav a').is(':focus') === false){
            $('.dropdown').removeClass('hover');
        }
    });
});