0

ネストされた <ul> と <li> がたくさんあり、<li> でホバー/選択されたクラスを持ち、キーボードの上下ボタンを使用して上下に選択できるようにしたいと考えていますただし、それらはネストされており、必要に応じて <ul> をジャンプする必要があります。

例えば：

<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) キーアップ/キーダウンのコードには、選択されているものと次/前の項目を探すことが含まれます。項目に hover クラスがあることも確認する必要がある場合があります。

ナビゲート可能なアイテムを選択するために必要なものがあるため、jQuery が選択できるようにするために何かが必要になります。それぞれに空の cssclass="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 に答える