JavaScript下拉菜单的可访问性

我已经实现了自己的下拉菜单，并希望澄清我的解决方案的可访问性含义：

我现在感兴趣的代码是：

$('#sub-nav > li ul').each(function(index){

    var $this = $(this),
        index = index + 1;

    $this    
    .clone()
    .appendTo('#main-nav > li:eq(' + index + ')');

});

“sub-nav”通过CSS向所有人隐藏以开始。然后将其附加到相关的“主导航”li。这种方法会阻止使用辅助技术的人进入子菜单项吗

---

请不要问我为什么这样做。可以说，我无法访问项目的原始标记，因此不能只按我想要的方式将子菜单附加到标记。

以获得更大的可访问性，考虑添加键盘支持。当链接具有焦点时（通过tab或其他方式），确保其子AV可见。同样，当subnav链接具有焦点时，请确保其可见。您可以通过

：focus

使用css实现其中一些功能

很遗憾，您没有访问标记的权限。是否有理由需要克隆

，或者只移动原始元素就可以了？使用脚本进行dom操作，但通过

：hover

伪类使用css进行显示/隐藏

这可以部分地帮助您实现这一目标：您仍然需要一些JavaScript来管理选项卡并关注子项

#main-nav li > ul
{
    display: none;
}

#main-nav > li a:focus + ul,
#main-nav > li:hover > ul
{
    display:block;
}

---

您的

#主导航
链接会去任何地方吗？还是仅仅用于触发子导航？如果他们不去任何地方，为了支持禁用JavaScript的浏览器，请考虑先用CSS隐藏<代码>主Nav/<代码>，然后用JavaScript显示。这样，除非链接真的有作用，否则它不会显示。
干杯。在相邻的兄弟选择器上发出良好的叫声。不幸的是，我需要IE6支持。我正在使用selectivizr，但这似乎并没有增加对IE6中选择器的支持。@Ryan-Bummer，在您处理IE6支持问题时，我向您表示哀悼。祝你好运