Javascript 下拉菜单键盘响应问题

我真的是一个新的网站建设，我试图使这个下拉菜单键盘响应，但不工作

现在我可以在链接上单击tab键并显示下拉菜单

演示：

CSS:

HTML

试试这个： 删除：

致：

---

尝试将您的js改为：

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

$('#menu li:has(ul)').focusin(function(){
    $(this).find('> ul').stop().slideToggle(400); 
});
$( '#menu li:has(ul)' ).keydown(function( event ) {
if ( event.which == 9 ) {
    event.preventDefault();
$(this).find('> ul').stop().slideToggle(400);
}});

---

刚刚在选项卡上添加了一个按键事件，打开菜单

看起来不错。美好的work@derek_duncan但不是键盘响应的：/你说的“键盘响应”是什么意思？顺便说一句，@bjb568我更新了问题和提琴，试着用键盘键（tab键）打开菜单库，但如何保持下拉菜单打开

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

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

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

$("#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); 
});

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

$('#menu li:has(ul)').focusin(function(){
    $(this).find('> ul').stop().slideToggle(400); 
});
$( '#menu li:has(ul)' ).keydown(function( event ) {
if ( event.which == 9 ) {
    event.preventDefault();
$(this).find('> ul').stop().slideToggle(400);
}});