如何在悬停和聚焦上打开引导导航菜单

Question

我正在尝试打开导航栏菜单，在悬停和焦点。这就是我所尝试的：但是在悬停状态下它工作得很好，但是在聚焦状态下菜单列表应该打开。

当屏幕阅读器使用键盘选项卡按钮时，我需要打开菜单列表，就像在悬停时打开一样。

JS：

$(document).ready(function(){
    $(".dropdown").hover(            
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideDown("fast");
            $(this).toggleClass('open');        
        },
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideUp("fast");
            $(this).toggleClass('open');       
        }
    ).focus(function() {
            $('.dropdown-menu', this).stop( true, true ).slideDown("fast");
            $(this).toggleClass('open');        
        },
        function() {
            $('.dropdown-menu', this).stop( true, true ).slideUp("fast");
            $(this).toggleClass('open');       
        }
    )
});

小提琴链接：演示

Answer 1

jquery.focus不像hover那样采用2个处理程序。它只需要1个处理程序函数。此外，焦点事件在form和anchor元素的浏览器中工作。您正尝试在列表项上使用它。它可能不会始终如一地起作用。

但是，如果将tabindex属性添加到元素中，则focus事件将在大多数最新的浏览器上工作。

这里有一个例子：

null

$('.dropdown').focus(function(){
  alert('Focus event works!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input tabindex="1" placeholder="Move focus with TAB" />
<ul>
  <li class="dropdown" tabindex="2">Works</li>
  <li class="dropdown">Does not work, not focused.</li>
</ul>