BootstrapJS - 导航导航列表在单击时不会折叠

BootstrapJS - Nav Nav-list not collapsing on click.

本文关键字：导航 折叠 列表 BootstrapJS 单击      更新时间：2023-09-26
难

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

我已经查看了代码示例，我很确定我使用相同的类和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>
想

通了。

当您附加一个没有结束标签的标签时，浏览器会为您插入一个。因此，这些对象没有作为子对象出现。

这是我修改后的解决方案，它将所有要追加的数据放在一个变量中，然后附加它。 

        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);
        }
相关文章：