如何使用键盘通过< ul> < li>元件 [英] How to navigate with keyboard through <ul> <li> element

问题描述

可能重复：

KeyBoard使用jquery导航菜单

使用< ul> < li> 标签，并在用户在文本框中按输入键时向用户显示。他可以使用鼠标选择菜单中的项目（在菜单中导航），但是我也想允许他使用例如键盘的向上/向下按钮从该菜单中选择项目。

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?

我的菜单有以下结构： p>

My menu has following structure:

<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> 一个背景图片。

推荐答案

工作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;   
}

这篇关于如何使用键盘通过< ul> < li>元件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！