0

我开发了一个菜单，但我想在菜单中添加一些键盘功能。当菜单聚焦时，我希望能够按下enter以显示菜单。然后我就可以按下来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;
}
4

1 回答 1

0

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

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
        }
    });
});

小提琴

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

于 2013-07-09T04:41:53.373 回答