理解Bootstrap可折叠层次结构中的问题

Question

我想使用Bootstrap和python Flask创建一个动态可折叠的层次结构

以下是我的代码

<div class="list-group list-group-root well" style="width:60%">
   {% for majorversionname, majorversionId, minorList in [[1,1,[('1','1'),('1a','1a')]], [2,2,[('2','2'),('2a','2a')]] ] %}  
    <a href="#item-1-1" class="list-group-item" data-toggle="collapse">
       <i class="glyphicon glyphicon-chevron-right"></i>Version - {{majorversionname}}
    </a>                                                               
    <div class="list-group collapse" id="item-1-1">                      
      {% for minorversionname, minorversionId in minorList%}
        <p >{{minorversionname}} </p>                                      
      {% endfor %}                     
    </div>                                                               
   {% endfor %}                                                     
</div>

当我点击Version-1按钮时，我的输出看起来像这个Clicking Version-1

这是意料之中的。但是，当我单击Version-2链接时，我看不到Version-2列表，而是看到与version-1对应的列表。请检查下图

Clicking Version-2

所以我的问题是，我应该将div和其他元素放在哪里，这样当我单击Version-1时，我会看到它的列表，当我单击Version-2时，我会看到它的列表。

我认为我们观察到这种行为是因为id="item-1-1“的许多副本是不可能的。但不参考id。我不能创建可折叠的HIerarchy

Answer 1

正如我猜测的那样，这是由于id字段id="item-1-1“将其更改为动态ID id="#{{majorersionid}}”导致的！

<div class="list-group list-group-root well" style="width:60%">
   {% for majorversionname, majorversionId, minorList in [[1,1,[('1','1'),('1a','1a')]], [2,2,[('2','2'),('2a','2a')]] ] %}  
<a href="#{{majorversionId}}" class="list-group-item" data-toggle="collapse">
   <i class="glyphicon glyphicon-chevron-right"></i>Version - {{majorversionname}}
</a>                                                               
<div class="list-group collapse" id="{{majorversionId}}">                      
  {% for minorversionname, minorversionId in minorList%}
    <p >{{minorversionname}} </p>                                      
  {% endfor %}                     
</div> {% endfor %}</div>