谁能帮我解决这个下拉菜单,我遇到的问题是无法使用键盘,如果您在菜单的第一项上按 Tab 键,它会打开菜单但无法浏览下拉菜单中的元素。
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);
});
最佳答案
我通过添加一些特定的 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 在这里:
关于javascript - 下拉菜单不适用于键盘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23370784/