Question

此元素的目的是使可折叠导航系统完全基于简单的无序列表。默认情况下，所有嵌套列表都将被隐藏，并且.toggle divs（按钮）附加到包含嵌套列表的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/

Answer 2

你想要做的是在前面加上toggle div，而不是追加它。

更新您的代码以使用prepend功能：

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

Working example

jQuery - live（）不使用附加div中的next（）

2 个答案: