html - ul > li > a 上的键盘交互。焦点不适用于 Firefox，但在 Chrome 中

Question

我希望能够仅在键盘上与下拉菜单进行交互。在 Chrome 中它运行良好，但在 Firefox 上不起作用。我想工作的键盘输入：

'Tab'（菜单集中，有效）

--> 'Enter'（下拉菜单，它可以工作）

--> 'Tab' 选择菜单项失败

--> 'Enter' 检查菜单项

HTML：

<div id="headerbuttons" class="loggedin">
              
   <div tabindex="0" class="button user css-onclick-menu">
       <span class="username" title="TESTUSER">
           <div class="icon"></div>
           TESTUSER
       </span>
                  
     <ul class="css-onclick-content">
       <li>
         <a href="/bookmark/check">add bookmark</a>
       </li>
       <li>
         <a href="/user">my profile</a>
       </li>
       <li>
         <a href="/ettutorials">tutorials</a>
       </li>
    </ul>
    
  </div>
</div>

JS：

(function ($) {
  "use strict";

  $(document).ready(function () {
    
    $('.css-onclick-menu .username').on('click', function() {
      toggleUserMenu($('.user .css-onclick-content'));
    });
    $('.button.user.css-onclick-menu').keypress(function (e) {
      let key = e.which;
      if(key == 13) {
        toggleUserMenu($('.user .css-onclick-content'));
      }
    });

     var toggleUserMenu = function($content) {
        if($content.css('display') == 'block') {
                        $content.css('display', 'none');
        } else {
            $content.css('display', 'block');
        }
    }

  });
})(jQuery);

最小的 CSS

.css-onclick-content {
    display: none;
    top: 9px;
}

使用更高级的 CSS 在 JsFiddle 中玩耍：

https://jsfiddle.net/0L64ktw1/1/

我试图设置tabindex=0，<li>但<a>它不像预期的那样工作。谢谢你。

标签： htmlgoogle-chromefirefoxfocustabindex