Почему строки бутстрапа не сворачиваются/расширяются?

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, но при нажатии Objective 1.1 или Objective 1.2 внучат строки не расширяются.

Пожалуйста, помогите!

Answer 1

При печати HTML для Objective x.x, у вас есть:

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

но вы должны иметь

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

Селектор не находит элемент разрушиться.

Надеется, что он работает после фиксации этого: D

Answer 2

Итак, после нескольких часов царапины на голову я нашел проблему!

Программа генерирует уникальные идентификационные номера для каждой строки, относящейся к цели данных следующей строки, используя уникальный код данной цели. Данные целевой выражается как:

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

Результирующий HTML выглядит следующим образом:

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

Обратите внимание, что второй период в данных-мишени? Вот что вызвало проблему! Когда я удалил его, программа отлично работала!