HTML/CSS：焦点选择器和 Tab 键在 Firefox / Windows 7 中不起作用

Question

我正在尝试创建一个仅包含 HTML 和 CSS 的下拉菜单，该菜单最初是隐藏的，然后在用户将鼠标悬停在链接上或标签上后出现在屏幕上。

悬停方面工作正常，但我似乎无法让我的菜单仅使用键盘或 Tab 键正常工作。

这里是sn-p：

#menu {display: none;}

a:focus + #menu {display: block;}

<a href="#menu">Drop Down Menu</a>


<div id="menu">
<ul>
<li><a href="#">Test Link 1</a></li>
<li><a href="#">Test Link 2</a></li>
<li><a href="#">Test Link 3</a></li>
<li><a href="#">Test Link 4</a></li>
</ul>
</div>

点击“下拉菜单”链接确实会显示隐藏的链接，但是一旦子链接出现在屏幕上，我就无法点击它们。我尝试将 tabindex="0" 属性添加到所有 div、ul 和 li 元素，但似乎也没有解决问题。

我是网页设计的新手，也许我遗漏了一些东西。任何建议将不胜感激。

Answer 1

我相信您遇到了问题，因为当您 display: none 一个元素时，它实际上从用户的角度将其从页面中删除，并且 DOM 仍然记住这些元素不是页面的一部分，即使在您之后动态添加它们。此外，有些人会说使用 display: none 这样会对可访问性产生负面影响： https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/

以下是一些 JavaScript，可通过特定代码为您提供所需的效果：

<style>

.hide {
   position: absolute !important;
   top: -9999px !important;
   left: -9999px !important;
}

</style>

<a href="#menu">Drop Down Menu</a>


<div id="menu">
  <ul>
    <li><a href="#">Test Link 1</a></li>
    <li><a href="#">Test Link 2</a></li>
    <li><a href="#">Test Link 3</a></li>
    <li><a href="#">Test Link 4</a></li>
  </ul>
</div>

<script>
  (function() {
    var menu = document.getElementById('menu');

    //convert list of a elements into an array
    var anchor = Array.prototype.slice.call(document.getElementsByTagName('a'));

    menu.classList.add('hide');

    //loop through a elements, removing hide class from #menu on focus
    anchor.forEach(function(c) {
      c.addEventListener('focus', function() {
        menu.classList.remove('hide');
      });
      c.addEventListener('blur', function() {
        menu.classList.add('hide');
      });
    });
  })();
</script>