Bootstrap for 循环中的手风琴 jinja2

Question

我在 jinja 模板的 for 循环中使用 bootstrap 手风琴元素。代码如下：

<div class="accordion" id="accordionExample">
    {% for article in articles %}
        <div class="accordion-item">
        <h2 class="accordion-header" id="{{article['Id']}}">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            {{article['Job Title']}}
            </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
            <div class="accordion-body">
            {{article['Description']}}
            </div>
        </div>
        </div>
    {% endfor %}

当我试图打开任何一个手风琴项目时，它只打开了第一个项目。有什么办法可以纠正这个问题吗？我已经尝试过问题中的方法：

Using Jinja2 (flask) to loop through a bootstrap accordian

但它不起作用。数据格式如下：

({'Id': 12941, 'Discipline': '0 Computational Science ', 'Job Title': 'High-performance Computing', 'Description': 'Some text here'})

编辑：基本上文章来自 Flask 后端，我需要以手风琴式结构呈现每篇文章。我复制了页面示例 1 中的代码：https://getbootstrap.com/docs/5.0/components/accordion/

Answer 1

<div class="accordion" id="accordionExample">
{% for article in articles %}
    <div class="accordion-item">
    <h2 class="accordion-header" id="Arr{{article['Id']}}">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#Arr{{article['Id']}}" aria-expanded="false" aria-controls="Arr{{article['Id']}}">
        {{article['Job Title']}}
        </button>
    </h2>
    <div id="Arr{{article['Id']}}" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
        <div class="accordion-body">
        {{article['Description']}}
        </div>
    </div>
    </div>
{% endfor %}

data-bs-toggle 应始终等于目标手风琴 ID。因此，根据我上面的代码，{{article['Id']}} 将是 Bootstrap 的唯一 ID，用于标识每个手风琴元素。同样从您的代码来看，第一个似乎是唯一打开的，因为所有 .accordion-collapse 都具有相同的 ID。 注意： ID 属性在整个页面中应该是唯一的。任何两个元素都不应具有相同的 ID。 HTML ID on w3schools

编辑： 添加 Arr 到 ID，因为数字不是有效的 HTML ID。

Bootstrap for 循环中的手风琴 jinja2

Bootstrap accordian in a for loop jinja2

html

python

jinja2

flask

bootstrap-5