鍵盤選擇嵌套李的使用jQuery

我有嵌套<UL>的負載的和<李>的，我希望能夠有一個<李>懸停/選擇類，並使用鍵盤向上和向下按鈕在<li> s上選擇向上和向下按鈕。但是，如果需要，它們是嵌套的，需要跳過<ul> s。鍵盤選擇嵌套李的使用jQuery

例如：

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

當我按向下鍵我想按數字順序進行選擇的項目（他們沒有數字順序編號，有時它們中的一些隱藏得那麼他們應該被忽略但它需要進入下一個<李>不是一個類別，並設置爲懸停。

來源

2010-01-15 Joel

你的問題是相當徹底的，但我想念你已經做了任何嘗試來創建此解決方案。 – 2010-01-15 12:31:52

有你自己嘗試過什麼了嗎？

沒有一個具體的解決方案，這裏有一些事情要得到y你去吧。

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-15 12:52:25

如果使用單選按鈕你可以用純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-15 13:04:39

鍵盤選擇嵌套李的使用jQuery

回答

相關問題