如何在jquery中爲n級菜單動態創建ul li列表？

Question

以下是第一級菜單項的代碼

<ul>  
    <li><a href="#" >item1</a>  
    <li><a href="#">item2</a> </li>  
    <li><a href="#">item3</a></li>  
    <li><a href="#">item4 </a></li> 
    </ul> 

時，應建立在與類似的列表物品1子菜單前

 <ul>  
    <li><a href="#" >item11</a>  
    <li><a href="#">item12</a> </li> 
    <li><a href="#">item13</a></li> 
    <li><a href="#">item14 </a></li> 
    </ul> 

用戶點擊，它西港島線走n個級別。我想爲此寫jQuery點擊事件。請記住，它將進入n級，動態創建的元素也應該處理相同的點擊事件。你的幫助將不勝感激。感謝

Answer 1

如何：

$("ul").delegate("li > a", "click", function() { 
    var prefix = $(this).text(), 
     $newList = $("<ul />"); 
    for(var i = 1; i <= 4; i++) { 
     $newList.append("<li><a href='#'>" + prefix + i + "</a></li>"); 
    } 
    $(this).closest("li").append($newList); 
}); 

例子：http://jsfiddle.net/FLg3L/

點擊鏈接 「物品1」 將產生以下HTML：

<ul>  
    <li> 
     <a href="#">item1</a> 
     <ul> 
      <li><a href="#">item11</a></li> 
      <li><a href="#">item12</a></li> 
      <li><a href="#">item13</a></li> 
      <li><a href="#">item14</a></li> 
     </ul> 
    </li> 
    <li><a href="#">item2</a> </li>  
    <li><a href="#">item3</a></li>  
    <li><a href="#">item4 </a></li> 
</ul>