我想制作一个适用于键盘的菜单,但我不知道如何在焦点上显示下拉菜单。
我已经:
.main-menu li:hover ul,
.main-menu li:focus ul {
display: block;
}
问题在于,当它聚焦到嵌套在li中的a上时,它只会显示ul。按tab键时将聚焦在a标签上。
以下是完整代码:http://jsfiddle.net/bxpe4/
我想制作一个适用于键盘的菜单,但我不知道如何在焦点上显示下拉菜单。
我已经:
.main-menu li:hover ul,
.main-menu li:focus ul {
display: block;
}
在这里可能会有用的另一个属性是:focus-within
。如果您执行以下操作,则应该也有效。
.main-menu li:hover ul,
.main-menu li:focus-within ul {
display: block;
}
focus-within
伪类不仅关心当前元素,而且还关心其所有子元素。我认为这是一个相当干净的解决方案,并且它适用于我的问题。当使用 Tab 键时,焦点会聚集在 .main-menu li
中的 anchor
上,而不是 list-item
本身。
有两种解决方法:
a) 使用 +
选择器
.main-menu li a:focus + ul {
display: block;
}
然而,这使得切换到其他锚点变得有问题(在按下选项卡时,它应该转到子菜单中的第一个锚点,但它被隐藏了,所以什么也没有发生)。
b) 使用 tabindex
属性
这需要您将菜单锚点的 tabindex
设置为负值(从选项卡中移除它们),并将选项卡设置为列表项。
您需要更改锚点和列表项的样式以显示红色背景,添加一个新的选择器:
.main-menu li a:hover,
.main-menu li a:focus,
.main-menu li.dropped > a,
.main-menu li:focus > a /* this one was added */ {
/* your styles */
}
然而,这并不是一个好习惯,因为专注于列表项意味着您无法使用键盘访问锚点。您可以使用JavaScript模拟事件(将列表项的keypress绑定到单击锚点),在jQuery中,它应该是这样的:
$('li[tabindex]').on('keypress', function() {
$(this).find('a').click();
});
如果顶级锚点没有任何操作(仅用于下拉目的),则这不是问题,在这种情况下,您根本不需要它们。