如何使用键盘访问键在导航栏中显示下拉菜单

Question

我将下拉菜单的accesskey设置为Alt+L；我的div标签如下：

<div class="dropdown">
<a class="dropbtn" accesskey="L"> .... </a>
<div class="dropdown-content">
<a href={option 1}>....</a>
<a href={option 2}>....</a>

使用Alt+L会高亮显示下拉选项卡，但不会打开它。我应该怎么做才能使键盘快捷键也打开下拉菜单？

Answer 1

您的a[accesskey]缺少可聚焦的href或tabindex属性。

示例

[accesskey]:focus + div  {border:solid;}

<div class="dropdown">
<a class="dropbtn" accesskey="L" href="#nowhere"> .... </a>
<div class="dropdown-content">
<a href={option 1}>....</a>
<a href={option 2}>....</a>
</div>
</div>
<div class="dropdown">
<a class="dropbtn" accesskey="O" tabindex="0"> .... </a>
<div class="dropdown-content">
<a href={option 1}>....</a>
<a href={option 2}>....</a>
</div>
</div>