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

Question

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

这是我的密码

<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" can not be possible. But without referring to the id. I can not make the Collapsible HIerarchy

Answer 1

我猜对了，它是由ID字段^{id1}引起的$

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