Question

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

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

以下是摘录：

＆＃13;

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

＆＃13;

<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>

＆＃13;

点击“下拉菜单”＆＃39;链接确实显示隐藏的链接，但是一旦它们出现在屏幕上，我就无法显示在子链接上。我尝试添加tabindex =＆＃34; 0＆＃34;归因于所有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>

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

1 个答案: