How to set keyboard focus to a representing parent element of a list
我通过下拉菜单列表上的键盘输入对可访问性进行了简单的实现,这是我使用HTML / CSS进行的,并且其事件是通过JS / jQuery控制的。
通过键盘可访问性的目的是这样的:
这里是我作为完全实现的示例制作的jsFiddle。
问题专门存在于jQuery代码中,最后一条语句是我试图确定问题解决方案的位置(请参阅下文)。
我的问题:
我如何做,以便在按Esc键以关闭下拉菜单时使用它;我回到下拉菜单父元素了,我最初是通过向下箭头键访问下拉菜单元素的?原因是,在我的实现中,如果退出下拉菜单,我们实际上是在要求用户使用其制表符访问其所在元素的方式。
这是我试图通过尝试(并失败)将焦点设置为我刚刚访问的父元素来解决的意外行为。
非常感谢您的帮助!
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | <ul class="menu"> <li> Menu Elem <ul> <li> Sub Menu Elem </li> <li> Sub Menu Elem </li> <li> Sub Menu Elem </li> </ul> </li> <li> Menu Elem <ul> <li> Sub Menu Elem </li> <li> Sub Menu Elem </li> <li> Sub Menu Elem </li> </ul> </li> <li> Menu Elem <ul> <li> Sub Menu Elem </li> <li> Sub Menu Elem </li> <li> Sub Menu Elem </li> </ul> </li> </ul> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | .menu > li { display: inline-block; text-align: center; color: white; background-color: orange; width: 100px; height: 70px; position: fixed; } .menu > li:hover { cursor: pointer; } .menu > :nth-child(1) { left: 1px; } .menu > :nth-child(2){ left: 102px; } .menu > :nth-child(3){ left: 203px; } .menu > li > a { line-height: 70px; } .menu > li > .subMenu { display: none; width: 200px; margin-top: 1px; outline: 1px solid black; } .menu > li > .subMenu > ul > li { height: 100px; background-color: green; margin-left: -40px; line-height: 100px; } .menu > li > .subMenu > ul > li:hover { background-color: purple; cursor: pointer; } a { text-decoration: none; color: white; } |
JS / jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | $(document).ready(function(){ var menuElem = $(".menu > li"); $(menuElem).hover(function(){ $(this).find(".subMenu").toggle(); }); $(menuElem).keydown(function(e) { // down arrow key if(e.keyCode === 40 && $(this).find(".subMenu").is(":hidden")){ $(this).find(".subMenu").toggle(); } // esc key else if(e.keyCode === 27 && $(this).find(".subMenu").is(":visible")){ $(this).find(".subMenu").toggle(); // ***** problematic code here ***** // Need to target the element, or the <li> element, or the , or the <ul> element, not sure which one will work. // Currently: trying to get whichever element represents the selected menu, in the below case the anchor element $(menuElem).eq($(this).index()).find("a").addClass("selected"); } }); }); |
您可以尝试使用
将焦点设置为父对象的