Question

我开发了一个菜单，但我想在菜单中添加一些键盘功能。当菜单聚焦时，我希望能够按输入来显示菜单。然后我可以按 Tab 选择菜单项。然后我想按 ESC 来隐藏菜单项。

如何更改CSS？

HTML

<ul class="hMenu">
  <li><a href="">prod1</a>
    <div>
      <a href="">test1</a>
      <a href="">test2</a>
      <a href="">test3</a>                  
    </div>
  </li>
  <li><a href="javascript:void(0);" >prod2</a>
    <div>
      <a href="">test4</a>  
      <a href="">test5</a>                  
    </div>
  </li>  
</ul>

CSS

ul.hMenu li:hover a {
  color:red;
}           
ul.hMenu  { 
  margin: 0;
  padding: 0; 
  z-index: 1;               
}
ul.hMenu li  {  
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  width:140px;
}
ul.hMenu li a { 
  display: block; 
  text-align: left;
  text-decoration: none
}          
ul.hMenu li div  {                    
  position: absolute;               
  display: none;                
}
ul.hMenu div a {
  background: yellow;     
}
ul.hMenu li :hover   {
  background: yellow
}
/**Mouse hover the menus can show up**/
ul.hMenu li:hover div{          
  display:block;
}

Answer 1

我想出了一个能让你朝着正确方向前进的解决方案。

CSS无法处理与键入的特定键有关的事件。你需要使用javascript，或者在这种情况下使用jQuery来帮助你。

在这种情况下，您正在寻找keypress功能。

我不知道如何进行标签功能，但我确实让 Enter 和 ESC 功能正常工作

这是jQuery

$('document').ready(function () {
    var menu = $(".hMenu");
    menu.hide()
    $("body").on("keypress", function (e) {
        if (e.keyCode === 13) { //Key Code for Enter
            menu.fadeIn();
        }
        if (e.keyCode === 27) { //Key Code for ESC
            menu.fadeOut();
        }
        if (e.keyCode === 9) { //Key Code for Tab
            //Tabbing function here
        }
    });
});

Fiddle

当您按下相应的键时，这将有效地淡入和淡出菜单。

如何使用css伪类选择器实现此菜单？

1 个答案: