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 Button时的输出如下所示 Clicking Version-1

这是预期的。但是，当我单击Version-2链接时，我没有看到Version-2 Lists，而是看到对应于version-1的列表。请查看下图

Clicking Version-2

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

我认为我们观察到这种行为，因为id =“item-1-1”的许多副本是不可能的。但没有提到身份证。我无法制作可折叠的层次结构

Answer 1

正如我猜对了，它是由于ID字段id =＆＃34; item-1-1＆＃34; 将其更改为id =＆＃34;＃{{majorersionid}}＆＃34;，动态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>

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

1 个答案: