javascript - 下拉菜单键盘响应问题

Question

我对构建网站真的很陌生，我试图让这个下拉菜单键盘响应但不起作用。

现在我可以点击链接并显示下拉菜单。

演示:http://jsfiddle.net/q7m8s/

CSS:

   #menu{
        width:200px;
        background:#444;
    }
    .noBullets
    {
        list-style: none;
        padding-left: 0px;  
    }
    #menu li a{
        padding:15px;
    }
    #menu a{
        display:block;
        color:#fff;
    }
    #menu ul ul{
        display:none;
        background:#000;
    }
    #menu ul ul a:hover{
        background:#222;
    }

HTML

<div id="menu">
<ul class="noBullets">
    <li><a href="#">Home</a>
      <ul>
      <li><a href="#">About us</a></li>
      <li><a href="#">Direcctions</a></li>
      <li><a href="#">Form</a></li>
      </ul>
    </li>
    <li><a href="#">ontact Us</a></li>
</ul>
</div>

JS:(感谢 Carlos 更新)

    $('#menu li:has(ul)').hover(function(){
        $(this).find('> ul').stop().slideToggle(400); 
    });

   $('#menu li:has(ul)').focusin(function(){
    $(this).find('> ul').stop().slideToggle(400); 
});

Answer 1

试试这个: 删除:

$("#menu li:has(ul)").focus(function()
 {
     $(this).parents("li").addClass("hover");
 }).blur(function()
 {
     $(this).parents("li").removeClass("hover");
 }); 

收件人:

$('#menu li:has(ul)').focusin(function(){
    $(this).find('> ul').stop().slideToggle(400); 
});