引導程序行為什么不折疊/展開？

Question

我有一個顯示嵌套數據的表。 數據如下所示：

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

數據將在表中顯示如下：

要求是，在單擊目標1時，將出現子行（目標1.1和目標1.2）。 然后，當單擊“目標1.1”或“目標1.2”時，將出現相關的孫行（“目標1.1->目標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>

該表正確顯示，並且在單擊“目標1”時我的代碼可以工作，但是在單擊“目標1.1”或“目標1.2”時，子級行不會展開。

請幫忙！

Answer 1

為目標XX打印HTML時，您具有：

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

但是你應該有

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

選擇器未找到要折疊的元素。

希望在修復此問題后：D

Answer 2

好的，所以經過數小時的頭部抓撓后，我發現了問題所在！

該程序使用給定目標的唯一代碼為與下一行數據目標相關的每一行生成唯一的ID號。 數據目標表示為：

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

生成的HTML如下所示：

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

注意數據目標中的第二個期間嗎？ 那是造成問題的原因！ 當我刪除它時，程序運行得很漂亮！