for循环jinja2中的Bootstrap手风琴

Question

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

<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'}) 

编辑：基本上文章来自烧瓶后端，我需要以手风琴式结构呈现每篇文章。我复制了页面示例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

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