Question

我有一个可以悬停（鼠标悬停）的菜单。我想让它在键盘TAB上运行。

我尝试过以下操作，但在我的情况下不起作用。我在这做错了什么？

这是我的Javascript，css和html代码：

$.fn.accessibleDropDown = function ()
{
	var el = $(this);
	
	/* Setup dropdown menus for IE 6 */
	
	$("li", el).mouseover(function() {
		$(this).addClass("hover");
	}).mouseout(function() {
		$(this).removeClass("hover");
	});
	
	/* Make dropdown menus keyboard accessible */
	
	$("a", el).focus(function() {
		$(this).parents("li").addClass("hover");
	}).blur(function() {
		$(this).parents("li").removeClass("hover");
	});
}

$(document).ready(function()
{	
	$(".tableIconHambMenuBlackBgOnly").accessibleDropDown();
});

ul.css3menu1,ul.css3menu1 ul{
                list-style:none;background-color:none;border-width:0px;border-style:transparent;display:inline-block;}
ul.css3menu1 ul, .menuHidden {
                visibility:hidden;position:absolute;right:0;top:0;opacity:0;-moz-transition:all 0.5s;-webkit-transition:opacity 0.5s;-o-transition:opacity 0.5s,visibility 0.5s;transition:opacity 0.5s;background-color:#transparent;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;margin:23px 1px 0;}
ul.css3menu1 li:hover>ul, ul.css3menu1 li:focus>ul,ul.css3menu1 li.hover>ul, .menuVisible {
                visibility:visible;opacity:1; z-index:9999;}
ul.css3menu1 li{
                width:200px;position:relative;display:block;font-size:0;border-width:1px;}
ul.css3menu1 li:hover{
                }
ul.css3menu1 ul ul{
                position:absolute;right:100%;top:0;-moz-box-shadow:0px 0px 0px #63dbc3;-webkit-box-shadow:0px 0px 0px #63dbc3;box-shadow:0px 0px 0px #63dbc3;}
ul.css3menu1{
                width:20px;font-size:0;position:absolute;display:block;float:left;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;margin-top:4px;}
ul.css3menu1>li{
                width:25px;margin:-12px 0px 0px 0px;height:28px;}
ul.css3menu1 a:active, ul.css3menu1 a:focus{
                /*outline-style:none;*/}
ul.css3menu1 a{
                display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px ROsans,Arial,sans-serif;color:#000000;cursor:pointer;padding:0px 2px;background-color:transparent;border-width:0px;border-style:transparent;}
ul.css3menu1 ul li{
                float:right; margin:0px 0px 0px 1px;}
ul.css3menu1 ul a{
                text-align:right;padding-top:4px;padding-bottom:4px;background-color:#f6d4b2;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-bottom-width: 1px;border-left-width: 1px;font:12px ROsans,Arial,sans-serif;line-height:18px;color:#000000;text-decoration:none;border-style:solid;border-color:#fff;}
ul.css3menu1 li:hover>a,ul.css3menu1 li:focus>a,ul.css3menu1 li.hover a,ul.css3menu1 li a.pressed{
                border-style:none;color:#000000;text-decoration:none;border-style:solid;border-color:#fff;}
ul.css3menu1 ul li img{
                border:none;vertical-align:middle;margin-right:20px;padding-left:5px;float:left}
ul.css3menu1 span{
                display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul.css3menu1 ul span{
                text-align:right;padding:6px 2px;background-color:#f6d4b2;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:12px ROsans,Arial,sans-serif;color:#000000;text-decoration:none;border-style:solid;border-color:#fff;border-bottom-width: 1px;border-left-width: 1px;}
ul.css3menu1 ul li:hover>a,ul.css3menu1 ul li:focus>a,ul.css3menu1 ul li.hover a,ul.css3menu1 ul li a.pressed{
                background-color:#fbead9;color:#000000;text-decoration:none;}
ul.css3menu1 li.topmenu>a{
                background-color:#f6d4b2;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;}
ul.css3menu1 li.topmenu:hover>a,ul.css3menu1 li.topmenu:focus>a,ul.css3menu1 li.topmenu.hover>a,ul.css3menu1 li.topmenu a.pressed{
                background-color:#f6d4b2;}
ul.css3menu1 ul span img{
                border:none;vertical-align:middle;margin-right:20px;padding-left:5px;float:left}

<td class="tableIconHambMenuBlackBgOnly">
<ul class="css3menu1">
	<li><a href="#"><samp>
				<img src="./images/hamburgMenu_16px_Black.png" width="16"
					height="16" alt="menu">
			</samp> </a>
		<ul>
			<li><a href="#" class="jQueryNoEventPropagation" title="li1"
				tabindex="12"><img src="./images/li1_black.png" alt="li1">li1</a></li>
			<li><a href="#" class="jQueryNoEventPropagation" title="li2"
				tabindex="13"><img src="./images/li2_Black.png" alt="li2">li2</a></li>
			<li><a href="#" target="_blank" title="li3"
				class="jQueryNoEventPropagation" tabindex="14"><img
					src="./images/li3_Black.png" alt="li3">li3</a></li>
			<li><a href="#" class="jQueryNoEventPropagation" title="li4"
				tabindex="15"><img src="./images/li4_Black.png" alt="li4">li4</a></li>
			<li><a href="#" class="jQueryNoEventPropagation" title="li5"
				tabindex="16"><img src="./images/Icon5_Black.png" alt="li5">li5</a></li>
		</ul></li>
</ul>
</td>

Answer 1

“TAB”无法用jQuery捕获。您可以将以下代码添加到$.fn.accessibleDropDown = function (){，并通过控制台记录可以使用jQuery捕获哪些密钥：

$(document).keypress(function( event ) {
    console.log(event.which); //event.which is the code for the pressed key
});

Answer 2

您最好的选择是使用表单字段的原生焦点事件。您可以从选择列表中构建菜单，只需将选择列表放在页面之外：

select.menu { position:absolute; left:-9999px; }

选择列表将带有选项卡索引，而UL则不会。然后，您可以在选择列表上运行以下脚本：

$('select.menu').on('focus', function() {
    //open the menu
});

$('select.menu').on('blur', function() {
    //close the menu when the list is tabbed off
});

键盘可访问下拉菜单

2 个答案: