0

我有大量嵌套的 <ul> 和 <li>，我希望能够在 <li> 上设置悬停/选定类，并使用键盘上下按钮进行上下选择在 <li>s.. 但是它们是嵌套的，如果需要，需要跳过 <ul>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，有时其中一些是隐藏的，因此它们应该被忽略。但它需要转到下一个 <li> '不是一个类别并将其设置为悬停。

4

2 回答 2

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/

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

当您有具体问题时，如果您发回论坛，我相信人们会很乐意提供帮助 :-)

于 2010-01-15T12:52:25.943 回答
0

如果您使用单选按钮，则可以使用纯 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>
于 2010-01-15T13:04:39.137 回答