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

【问题标题】：Issue in understanding Bootstrap Collapsible Hierarchy理解 Bootstrap 可折叠层次结构的问题
【发布时间】：2017-08-12 15:17:12
【问题描述】：

我想使用 Bootstrap 和 python Flask 创建一个动态的 Collapsible Hierarchy

这是我的代码

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

单击版本 1 按钮时的输出如下所示 Clicking Version-1

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

Clicking Version-2

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

我认为我们观察到了这种行为，因为不可能有多个 id="item-1-1" 副本。但是没有提到id。我无法制作可折叠层次结构

【问题讨论】：

我已经尝试了所有可能的 div 和 for 循环的位置，但无济于事。有人知道答案了吗？
我知道这是由于 ID 参数 id="item-1-1" 造成的，但没有它我无法做出正确的参考。

标签： python html twitter-bootstrap flask

【解决方案1】：

我猜对了，这是由于 ID 字段 id="item-1-1" 将其更改为 id="#{{majorersionid}}"，动态 id，即可解决！

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

【讨论】：