我有一个显示嵌套数据的表。数据如下所示:
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”时,孙行不会展开。
请帮忙!
最佳答案
在为 Objective X.X 打印 HTML 时,您可以:
data-target="#.{{ node2[0][1] }}collapsed"
但是你应该有
data-target=".{{ node2[0][1] }}collapsed"
选择器未找到要折叠的元素。
希望修复此问题后能正常工作:D
关于javascript - 为什么引导行不折叠/展开?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40725389/