Question

难倒在另一个人身上。我正在使用boostrapJS来创建一个Nav-List。理想情况下，标题默认会保持折叠状态，但在单击时会展开。现在我有一些javascript将动态填充List，但click事件似乎什么也没做。（有点 - 我点击标题，它有点抖动，但它不会崩溃）。

我已经查看了代码示例，我很确定我使用的是相同的类和div结构，但它似乎仍然没有工作，并且它没有抛出任何错误。

这是我的代码：

        $('#header').append('<ul class="nav nav-list">');
        for (i = 0; i < len; i++) {
            k = keys[i];
            $('#header').append('<label class="tree-toggle nav-header">' + keys[i] + '</label>');
            for (var j in groupedtemplates[k]) {
                $('#header').append('<a href="#"><li data-value=' + groupedtemplates[k][j].id + '>' + groupedtemplates[k][j].attributes.im_name.value + '</li></a>');
            }
        }
        $('#header').append('</ul>');

        $(document).ready(function () {
            $('.tree-toggle').click(function () {
                $(this).parent().children('ul.tree').toggle(200);
            });
        });

它插入的HTML只是一个简单的容器。

    <div class="well" style="width:100%; padding: 8px 0;" id="header">

    </div>

Answer 1

想出来。

当您附加没有结束标记的标记时，浏览器会为您插入一个标记。因此，物体不像儿童一样出现。

这是我修改过的解决方案，它将所有数据都附加到变量中，然后将其追加。

        for (i = 0; i < len; i++) {
            k = keys[i];
            var toAppend = "";
            toAppend = toAppend + '<ul class="nav nav-list">' + '<li><label class="tree-toggle nav-header">' + keys[i] + '</label</li>' + '<ul class="nav nav-list tree">'
            for (var j in groupedtemplates[k]) {
                toAppend = toAppend + '<a href="#"><li data-value=' + groupedtemplates[k][j].id + '>' + groupedtemplates[k][j].attributes.im_name.value + '</li></a>'
            }
            toAppend = toAppend + "</ul></ul>";
            $('#header').append(toAppend);
        }

Bootstrap - 导航导航列表在点击时不会折叠。

1 个答案: