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)').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); 
});

Answer 2

尝试将您的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);
}});

只需在标签上添加一个关键事件即可打开菜单

下拉菜单键盘响应问题

2 个答案: