如何使用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> 

当用户点击item1时，会出现类似列表的子菜单。

     <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个级别，动态创建的元素也应该处理相同的点击事件。非常感谢您的帮助。

- suma dharawad

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/

点击“item1”链接会产生以下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>

- Andrew Whitaker