使用 CSS 显示焦点下拉列表的正确方法

Question

我正在尝试制作一个键盘可访问菜单，但我不知道如何让它显示焦点下拉菜单。

我有

.main-menu li:hover ul,
.main-menu li:focus ul {
    display: block;
}

问题是，当它专注于嵌套在 li 中的 a 而没有显示 ul 时。Tabbing 专注于 a 标签。

这是我的完整代码：http : //jsfiddle.net/bxpe4/

Answer 1

此处可能有用的另一个属性是:focus-within. 因此，如果您执行以下操作，它也应该有效。

.main-menu li:hover ul,
.main-menu li:focus-within ul {
    display: block;
}

该focus-within伪类不仅关心当前的元素，但其所有的孩子也是如此。我认为这是解决这个问题的一个非常干净的解决方案，并且对我的问题有效。

Answer 2

进行 Tab 键操作时，您关注的是anchor内部.main-menu li，而不是其list-item本身。

有两种解决方法：

a) 使用+选择器

.main-menu li a:focus + ul {
    display: block;
}

但是，这使得使用 Tab 键切换到其他锚点会出现问题（按 Tab 键时，它应该转到子菜单中的第一个锚点，但它不会显示，因此什么也不会发生）。

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 来模拟事件（绑定列表项的按键以单击锚点），在 jQuery 中，它会是这样的：

$('li[tabindex]').on('keypress', function() {
    $(this).find('a').click();
});

如果顶级锚点没有任何操作（仅用于下拉目的），这不是问题，在这种情况下您根本不需要它们。