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>

当用户点击具有相似的ex

列表的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 click事件。请记住，它将用于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/

点击链接“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>

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

1 个答案: