为什么 bootstrap 行不是 collapsing/expanding？

Question

我有一个显示嵌套数据的 table。数据如下所示：

Objective 1
    Objective 1.1
        Objective 1.1.1
    Objective 1.2
        Objective 1.2.1
Objective 2

数据要在table中显示如下：

要求是，当单击 Objective 1 时，会出现子行（Objective 1.1 和 Objective 1.2）。然后，当单击 Objective 1.1 或 Objective 1.2 时，会出现相关的孙行 (Objective 1.1 --> Objective 1.1.1)。

我在这个项目中使用 Python、Flask 和 Bootstrap，如果可能的话，我想纯粹在 Bootstrap 中执行此任务。

我目前的HTML如下：

<table class="table">
<thead>
<tr>
    <th>Primary Objectives</th>
    <th>Secondary Objectives</th>
    <th>Tertiary Objectives</th>
    <th>Editing Tools</th>
</tr>
</thead>

<tbody>
{% for node in all_nodes %}
<tr class="clickable" data-toggle="collapse" id="{{ node[0][1] }}" data-target=".{{ node[0][1] }}collapsed">
    <!-- objective tree -->
    <td class="text-left">{{ node[0][0] }}</td>
    <td class="text-left"></td>
    <td class="text-left"></td>

    <!-- Editing tools -->
    <td><a href="/edit/{{ node[0][1] }}" class="fa fa-edit"
           title="Edit Objective"></a>
        <div class="fa fa-circle-thin"></div>
        <a href="/deleteobjective/{{ node[0][1] }}" class="fa fa-exclamation-triangle"
           title="Delete User"></a>
    </td>
</tr>
{% for node2 in node[1] %}
<tr class="clickable collapse out {{ node[0][1] }}collapsed" id="{{ node2[0][1] }}" data-toggle="collapse"
    data-target=".{{ node2[0][1] }}collapsed">
    <!-- objective tree -->
    <td class="text-left"></td>
    <td class="text-left">{{ node2[0][0] }}</td>
    <td class="text-left"></td>

    <!-- Editing tools -->
    <td><a href="/edit/{{ node2[0][1] }}" class="fa fa-edit"
           title="Edit Objective"></a>
        <div class="fa fa-circle-thin"></div>
        <a href="/deleteobjective/{{ node2[0][1] }}" class="fa fa-exclamation-triangle"
           title="Delete User"></a>
    </td>
</tr>
{% for node3 in node2[1] %}
<tr class="collapse out {{ node2[0][1] }}collapsed">
    <!-- objective tree -->
    <td class="text-left"></td>
    <td class="text-left"></td>
    <td class="text-left">{{ node3[0] }}</td>

    <!-- Editing tools -->
    <td><a href="/edit/{{ node3[1] }}" class="fa fa-edit"
           title="Edit Objective"></a>
        <div class="fa fa-circle-thin"></div>
        <a href="/deleteobjective/{{ node3[1] }}" class="fa fa-exclamation-triangle"
           title="Delete User"></a>
    </td>
</tr>
{% endfor %}
{% endfor %}
{% endfor %}
</tbody>

table 显示正确，我的代码在单击 Objective 1 时有效，但是当单击 Objective 1.1 或 Objective 1.2 时，孙子行不会展开。

请帮忙！

Answer 1

当为 Objective X.X 打印 HTML 时，您有：

data-target="#.{{ node2[0][1] }}collapsed"

但你应该

data-target=".{{ node2[0][1] }}collapsed"

选择器未找到要折叠的元素。

希望修复后它能正常工作:D

Answer 2

好的，经过几个小时的摸索，我发现了问题！

程序使用给定的 objective 的唯一代码为与下一行的数据目标相关的每一行生成唯一的 ID 号。数据目标表示为：

data-target=".{{ node[0][1] }}collapsed"

结果 HTML 如下所示：

 <tr class="clickable collapse out obj1collapsed" id="obj1.1"
                data-toggle="collapse"
                data-target=".obj1.1collapsed">

注意到数据目标中的第二个句点了吗？这就是导致问题的原因！当我删除它时，程序运行得非常好！

为什么 bootstrap 行不是 collapsing/expanding？

Why is are the bootstrap rows not collapsing/expanding?

javascript

jinja2

flask

twitter-bootstrap-3