键盘可访问性下拉菜单

Question

I have a menu which works on hover(mouseover). I want to make it work on keyboard TAB.

I have tried the following but it doesn't work in my case. What am i doing wrong here?

Here's my Javascript,css and html code:

 $.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" cannot be catched with jQuery. You can add the following code to $.fn.accessibleDropDown = function (){ and see by console logging which keys can be catched with jQuery:

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

Answer 2

Your best bet is to use the native focus event of form fields. You can build your menu from a select list, and just position the select list off the page:

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

The select list will come with tab index, which a UL won't. Then you can run the following script on your select list:

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

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