Question

有人可以帮助我使用这个下拉菜单，我遇到的问题是没有使用键盘，如果你在菜单的第一项上选项卡它打开菜单但是不可能浏览下拉菜单中的项目。

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/

下拉菜单无法使用键盘

1 个答案:

HTML

JS