下拉菜单无法使用键盘

Can some one help me with this drop down menu, the problem that I'm having is that not working with the keyboard, If you tab on the first item of the menu it open the menu but is not possible to navigate thru the items inside the drop menu.

有人可以通过这个下拉菜单帮助我,我遇到的问题是没有使用键盘,如果你在菜单的第一项选项卡它打开菜单但是无法通过里面的项目导航下拉菜单。

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

1 个解决方案

#1

I fixed this by adding some specific tabindex's and changing the focusin event to fire slideDown and the focusout event to fire slideUp.

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

Code is here:

代码在这里:

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 is here:

JS Fiddle在这里:

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