键盘选择嵌套的li'；使用jquery

我有很多嵌套的

和
• ，我希望能够在
• 上有一个悬停/选定的类，并使用键盘上的向上和向下按钮在
• 上选择向上和向下。。但是，它们是嵌套的，必要时需要跨越
  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>
  

  
  
  第一类
  
  项目1
  项目2
  项目3
  项目4
  
  
  
  第2类
  
  项目5
  项目6
  项目7
  项目8
  
  
  
  第3类
  
  项目9
  项目10
  项目11
  项目12
  
  
  
  
  
  第四类
  
  项目13
  项目14
  项目15
  项目16
  
  
  
  

  ---

  当我按下向下键时，我希望按数字顺序选择项目（它们没有数字顺序ID，有时它们中的一些是隐藏的，因此应该忽略。但是需要转到下一个不是类别的
  • 并将其设置为悬停。
    您自己尝试过什么吗
    如果没有一个具体的解决方案，这里有一些事情可以让你去做
    1） 绑定按键事件（例如，绑定到文档）
    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代码将涉及查找所选内容以及下一个/上一个项目。您可能需要检查一个项目是否也有hover类
    您将需要一些关于选择可导航项的信息，因此，您需要jQuery能够选择的信息。建议为每个项目添加一个空css

    class=“navigable”

    ，这样您就可以选择所有需要键盘导航的项目：

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

    考虑您的可见需求：

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

    4） 也许可以考虑对这些进行分类，查看以下链接
    无论如何，这是一个开始。我可以想很多你需要做的事情，但我认为这对你来说是一次冒险

    ---

    当你有具体问题时，我相信如果你发回论坛，folk会很乐意帮助你：-）
    如果你使用单选按钮，你可以用纯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>
    

    
    第一类
    
    项目1
    项目2
    项目3
    项目4
    
    
    第2类
    
    
    项目5
    项目6
    项目7
    项目8
    
    
    第三类
    
    项目9
    项目10
    项目11
    项目12
    
    
    
    
    
    第四类
    
    项目13
    项目14
    项目15
    项目16
    
    
    
    

    您的问题非常彻底，但我错过了您为创建此解决方案所做的任何尝试。

    <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>