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

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');       
        }
    )
});

小提琴链接： Demo

Answer 1

jQuery.focus 不像 hover 那样需要 2 个处理程序。它只需要 1 个处理函数。此外，焦点事件适用于表单和锚元素的浏览器。您正在尝试在列表项上使用它。它可能无法始终如一地工作。

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

这是一个例子：

$('.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>