jQuery-live无法与附加div中的next一起使用

问题描述

|| 这个元素的目的是要有一个完全基于简单无序列表的可折叠导航系统。默认情况下，所有嵌套列表都将被隐藏，.toggle div（按钮）将附加到包含嵌套列表的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\");
    }
});
});

    

解决方法

尝试这个：

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

如果将选择直接嵌套在

<li>

元素中的所有

<ul>

元素，并在每个元素的前面添加

<div>

。 看一下该演示：http://jsfiddle.net/xXRSZ/1/     ,您要执行的操作是在切换div之前添加，而不是附加它。 更新您的代码以使用

prepend

函数：

$(\"#nav ul li\").has(\"ul\").prepend(\"<div class=\'toggle\'>[toggle div]</div>\");

工作实例