下拉菜单不适用于键盘

Question

有人可以帮我解决这个下拉菜单吗，我遇到的问题是不能使用键盘下拉菜单中的项目。

演示http://jsfiddle.net/4S3w8/

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：

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

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

Answer 1

我通过添加一些特定的 tabindex 并将 focusin 事件更改为触发 slideDown 并将 focusout 事件更改为触发 slideUp 来解决此问题。

代码在这里：

HTML

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

JS

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

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

JS Fiddle 在这里：

http://jsfiddle.net/4S3w8/2/