问题描述
可能重复:
使用 jquery 的菜单的键盘导航
我使用 <ul> 创建了一个菜单.<li> 标记并在用户按下文本框中的 Enter 键时将其显示给用户.他可以使用鼠标选择菜单项目(在菜单中导航),但我也希望允许他使用键盘的向上/向下按钮从该菜单中选择项目.
I created a menu using <ul> <li> tags and showing it to the user when he presses Enter key in the textbox. He can select items of the menu (navigate in menu) using mouse but I want also to allow him to select items from that menu using up/dow buttons of the keyboard for example.
有没有办法使用 jQuery 或 CSS 来做到这一点?
Is it any way to do that using jQuery or CSS?
我的菜单结构如下:
<div class="services"> <div class="items"> <ul> <li class="mail-icon"><a href="#" id="mail"><?php echo $langmsg['mail']; ?></a></li> <li class="forum-icon"><a href="#" id="forum"><?php echo $langmsg['forum']; ?></a></li> <li class="chat-icon"><a href="#" id="chat"><?php echo $langmsg['chat']; ?></a></li> </ul> </div> </div>
注意:<li> 元素也有背景图片.
Note: <li> element has a background image also.
推荐答案
工作中的jsFiddle
以下是如何处理循环选择:
Here is how to handle circular selection:
if (e.keyCode == 38) { // up var selected = $(".selected"); $(".services li").removeClass("selected"); // if there is no element before the selected one, we select the last one if (selected.prev().length == 0) { selected.siblings().last().addClass("selected"); } else { // otherwise we just select the next one selected.prev().addClass("selected"); } }
css:
.services li.selected { background-color: grey; }