我正在尝试通过键盘访问下拉菜单(仅使用 Tab,不使用访问键)。我不知道如何使子项目可访问。
所需的行为如下:当单击“item”或获得焦点时,显示列表;当“项目”失去焦点(模糊)时,如果没有“子项目”获得焦点(这意味着它已通过键盘访问),则隐藏列表。
fiddle :http://jsfiddle.net/DBdbz/
HTML
<p id="ui"><a href="#">Item</a></p>
<ul>
<li><a href="#">Sub item 1</a></li>
<li><a href="#">Sub item 1</a></li>
<li><a href="#">Sub item 1</a></li>
</ul>
JS
$('ul').hide();
$('#ui a').on('focus', function() {
$('ul').show();
});
$('#ui a').on('blur', function() {
$('ul').hide();
});
感谢您的帮助。
最佳答案
这个怎么样:http://jsfiddle.net/DBdbz/6/ ?
要让焦点/模糊在每个浏览器上工作,唯一需要的是给定元素上的 tabindex(无论是哪一个,请参阅 Lee 的 link ):
<p id="ui"><a href="#" tabindex="1">Item</a></p>
<ul>
<li><a href="#">Sub item 1</a></li>
<li><a href="#">Sub item 1</a></li>
<li><a href="#">Sub item 1</a></li>
</ul>
JS 来了:
$('ul').hide();
$('#ui a').on('focus', function() {
$('ul').show();
});
$('#ui a').on('keydown', function(e) {
if (e.keyCode == 9) {
$('ul').addClass('tab');
}
});
$('ul').on('mouseover', function() {
$('ul').addClass('mouse');
});
$('ul').on('mouseout', function() {
$('ul').removeClass('mouse').removeClass('tab');
});
$('ul li:last-child a').on('blur', function() {
if ($('ul').hasClass('tab')) {
$('ul').hide().removeClass('tab');
}
});
$('#ui a').on('blur', function() {
if (!$('ul').is('.tab, .mouse')) {
$('ul').hide();
}
});
关于jQuery:通过 Tab 访问下拉菜单项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15093867/