Question

我有一堆嵌套的＆lt; ul＆gt;和＆lt; li＆gt;'s，我希望能够在＆lt; li＆gt;上设置悬停/选定的课程，并使用键盘上下用于在＆lt; li＆gt; s上选择向上和向下的按钮..但是它们是嵌套的，并且如果需要则需要跳过＆lt; ul＆gt; s。

例如：

<ul>
    <li class='cat'>
        cat 1
        <ul>
            <li class='hover'>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
        </ul>
    </li>
    <li class='cat'>
        cat 2
        <ul>
            <li>item 5</li>
            <li>item 6</li>
            <li>item 7</li>
            <li>item 8</li>
        </ul>
        <ul class='subcat'>
            <li class='cat'>
                Cat 3
                <ul>
                    <li>item 9</li>
                    <li>item 10</li>
                    <li>item 11</li>
                    <li>item 12</li>
                </ul>
            </li>
        </ul>
    </li>
    <li class='cat'>
        cat 4
        <ul>
            <li>item 13</li>
            <li>item 14</li>
            <li>item 15</li>
            <li>item 16</li>
        </ul>
    </li>
</ul>

当我按下向下键时，我希望按数字顺序选择项目（它们没有数字顺序ID，有时它们中的一些被隐藏，所以它们应该被忽略。但它需要转到下一个＆lt; li＆gt;这不是一个类别，并将其设置为悬停。

Answer 1

你自己尝试了什么吗？

如果没有具体的解决方案，可以采取以下措施。

1）将按键事件绑定（例如绑定到文档）

$(document).keydown(MyKeyupFunc);

2）捕获上/下按键：

function MyKeyupFunc(event){

    switch (event.keyCode) {
        case 38: //keyup
            //key down code
            break;
        case 40: //keydown
            //key up code
            break;
        default:
            return;
    }

    //stop event 
    event.preventDefault();
    event.stopPropagation();
    if ($.browser.msie) {
        event.originalEvent.keyCode = 0;
        event.originalEvent.cancelBubble = true;
        event.originalEvent.returnValue = false;
    }
}

3）keyup / keydown的代码将涉及查找所选内容以及下一个/上一个项目是什么。您可能需要检查项目上是否还有悬停类。

您需要选择可导航项目，因此，您需要一些能够选择的jQuery。建议为每个添加一个空的css class="navigable"，这样你就可以选择所有受键盘导航的项目了：

var $navListitems = $("li.navigable");

考虑您的可见要求：

var $navListitems = $("li.navigable:visible");

4）也许考虑对这些进行排序，请查看以下链接

http://www.wrichards.com/blog/2009/02/jquery-sorting-elements/

无论如何，这是首发。我可以想到你需要做的更多，但我认为你尝试自己将是一次冒险。

如果您有具体问题，我相信如果您回到论坛，民众会很乐意提供帮助： - ）

Answer 2

如果使用单选按钮，则可以使用纯HTML执行此操作。

<ul>
    <li class='cat'>cat 1
        <ul>
        <li><input type='radio' name='n' id='n1'><label for='n1'>item 1</label></input></li>
        <li><input type='radio' name='n' id='n2'><label for='n2'>item 2</label></input></li>
        <li><input type='radio' name='n' id='n3'><label for='n3'>item 3</label></input></li>
        <li><input type='radio' name='n' id='n4'><label for='n4'>item 4</label></input></li>
        </ul>
    </li>
    <li class='cat'>cat 2
        <ul>
        <ul>
        <li><input type='radio' name='n' id='n5'><label for='n5'>item 5</label></input></li>
        <li><input type='radio' name='n' id='n6'><label for='n6'>item 6</label></input></li>
        <li><input type='radio' name='n' id='n7'><label for='n7'>item 7</label></input></li>
        <li><input type='radio' name='n' id='n8'><label for='n8'>item 8</label></input></li>
        </ul>
        <ul class='subcat'>
            <li class='cat'>Cat 3
                <ul>
                <li><input type='radio' name='n' id='n9'><label for='n9'>item 9</label></input></li>
                <li><input type='radio' name='n' id='n10'><label for='n10'>item 10</label></input></li>
                <li><input type='radio' name='n' id='n11'><label for='n11'>item 11</label></input></li>
                <li><input type='radio' name='n' id='n12'><label for='n12'>item 12</label></input></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class='cat'>
        cat 4
        <ul>
        <li><input type='radio' name='n' id='n13'><label for='n13'>item 13</label></input></li>
        <li><input type='radio' name='n' id='n14'><label for='n14'>item 14</label></input></li>
        <li><input type='radio' name='n' id='n15'><label for='n15'>item 15</label></input></li>
        <li><input type='radio' name='n' id='n16'><label for='n16'>item 16</label></input></li>
        </ul>
    </li>
</ul>

键盘选择嵌套的li与jquery

2 个答案: