爲什麼引導行不能合攏/展開？

Question

我有一個表格顯示嵌套的數據。數據看起來如下：

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

的數據如下，以顯示在表：

的要求是，在目標1單擊時，該子行（目標1.1和目標1.2）出現。然後，當單擊Objective 1.1或Objective 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

當打印HTML的目的x.x中，您有：

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"> 

注意的是，在數據目標第二期？這就是造成這個問題的原因！當我刪除它的程序工作得很漂亮！