如何在jquery中为n级菜单动态创建ul列表

How to create ul li list dynamically in jquery for n level menu?

本文关键字：动态 菜单 创建 ul 列表 jquery 中为      更新时间：2023-09-26

以下是一级菜单项的代码

    <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子菜单与类似的列表为ex

     <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 click event。请记住，它将为n级，动态创建的元素也应该处理相同的点击事件。感谢你的帮助。由于

如何:

$("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>
相关文章：