javascript - 水平菜单上的选项卡导航，菜单项的下拉菜单，在 focus() 处打开，但当它切换到新项目时，不会关闭

Question

使用鼠标，此菜单有效。我的问题是可访问性和键盘导航（Tabbing）。我有一个带有下拉菜单的水平菜单，为了简单起见，这里我只包括了一个。我需要使用此 AEM 生成的 html 结构来获得键盘导航（制表符）。水平导航工作，然后用 jquery with focus(); 我打开了下拉菜单，我可以垂直导航它，但是当它必须退出下拉菜单并聚焦水平菜单的第三项（或前一项）时，下拉菜单不会关闭。我怎么能告诉他这样的事情：当下拉列表的所有元素不再是焦点并且我移动到水平菜单的上一个或下一个第一级项目时，关闭下拉菜单。

使用 .blur() 和 .focusout() 我无法理解。

    $(".js-focus-menu-item-a").focus(function() {
        $(this).closest("li").find(".js-dropdown-menu").css('display', 'flex'); 
        $(this).closest("li").find(".js-focus-menu-item-a").addClass('activeFocus');
    });

<nav class="primary-navigation__nav">
    <ul class="list-inline primary-navigation__ul">
          
        <li class="js-focus-menu-item ">
            <a class="js-focus-menu-item-a" href="#">
                <span>
                    First Level menu 1
                </span>
            </a> 
        </li>
       
        <li class="js-focus-menu-item ">
            <a class="js-focus-menu-item-a" href="#">
                <span>
                    Level menu with Dropdown
                </span>
            </a>
            
           
            <div tabindex="1" class="primary-navigation__sub js-dropdown-menu">
                <ul class="list-unstyled">
                    
                        <li class="js-dropdown-menu-li">
                            <a class="js-dropdown-menu-li-a" href="#">
                                drop-down menu items 1
                            </a>
                        </li>
                    
                        
                        <li class="js-dropdown-menu-li">
                            <a class="js-dropdown-menu-li-a" href="#">
                                 drop-down menu items 2
                            </a>
                        </li>
                    
                        
                        <li class="js-dropdown-menu-li">
                            <a class="js-dropdown-menu-li-a" href="#">
                                drop-down menu items 3
                            </a>
                        </li>
                   
                </ul>
            </div>
        </li>
        
        <li class="js-focus-menu-item">
            <a class="js-focus-menu-item-a" href="#">
                <span>
                    First Level menu 3
                </span>
            </a> 
        </li>
    </ul>
</nav>
```HTML

标签： javascriptjquery