jQuery - live() 无法与 append div 中的 next() 一起使用

Question

此元素的目的是拥有一个完全基于简单无序列表的可折叠导航系统。默认情况下，所有嵌套列表都将被隐藏，并且 .toggle div(按钮) append 到包含嵌套列表的 li 项目。然后，这些 .toggle div 应该隐藏/显示嵌套列表，并将一个类应用于切换按钮。

我通过手动插入 .toggle div(用 [toggle div] 标注的位置)测试了此代码，一切正常。但是，当通过append()添加它时，似乎没有任何作用。有谁知道可能是什么原因导致这个问题？任何帮助将不胜感激 - 谢谢!

HTML:

<div id="nav">
<ul>
<li><a href="#">nav item</a>[toggle div]
    <ul>
        <li><a href="#">nav item</a></li>
        <li><a href="#">nav item</a></li>
        <li><a href="#">nav item</a>[toggle div]
            <ul>
                <li><a href="#">nav item</a></li>
                <li><a href="#">nav item</a></li>
                <li><a href="#">nav item</a></li>
            </ul>
        </li>
        <li><a href="#">nav item</a></li>
    </ul>
</li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
<li><a href="#">nav item</a></li>
</ul>
</div>

jQuery:

$(function(){
$("#nav ul li").has("ul").append("<div class='toggle'></div>");
$(".toggle").live("click", function() {
    if($(this).next().is(":hidden")) {
        $(this).next().show();
        $(this).addClass("toggled");
    } else {
        $(this).next().hide();
        $(this).removeClass("toggled");
    }
});
});

Answer 1

试试这个:

$("#nav li > ul").before('<div class="toggle"></div>');

如果将选择全部<ul>直接嵌套在 <li> 中的元素元素，并添加 <div>在他们每个人的面前。

看看演示:http://jsfiddle.net/xXRSZ/1/