当我在 Django 模板中使用 for 循环时创建多个折叠答案

【问题标题】：create multiple collapse when i use for loop in Django template当我在 Django 模板中使用 for 循环时创建多个折叠
【发布时间】：2021-02-01 05:25:11
【问题描述】：

当我在 Django 模板中使用 for 循环时如何创建多个折叠

我创建了一个显示课程列表的 django 模板，我想为每节课创建折叠，以便单击它时，它会显示来自我的 url 的视频。我该怎么做呢

html代码：

    <div id="accordion">
  {% for lesson in course_posts.lesson_set.all %}
<div class="card">
  <div class="card-header" id="headingOne">
    <h5 class="mb-0 text-center">
      <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
         {{lesson.name}}
      </button>
    </h5>
  </div>

  <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
    <div class="card-body">

      <iframe width="100%" height="400px" src="{{lesson.youtube_url}}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    </div>
  </div>
</div>
{% endfor %}
</div>

【问题讨论】：

标签： django django-rest-framework django-templates

【解决方案1】：

为了使折叠正常工作，每个可折叠项都应具有唯一的id。在您的代码中，ID 将相同。因此它不会工作。而且id应该是唯一值。

 <div id="accordion">
  {% for lesson in course_posts.lesson_set.all %}
    <div class="card">
      <div class="card-header" id="heading{{lesson.id}}">
        <h5 class="mb-0 text-center">
            <button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{lesson.id}}" aria-expanded="true" aria-controls="collapse{{lesson.id}}">
         {{lesson.name}}
           </button>
        </h5>
      </div>

      <div id="collapse{{lesson.id}}" class="collapse show" aria-labelledby="heading{{lesson.id}}" data-parent="#accordion">
         <div class="card-body">
             <iframe width="100%" height="400px" src="{{lesson.youtube_url}}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
             </iframe>
         </div>
      </div>
   </div>
  {% endfor %}
</div>

【讨论】：