引导手风琴在一个循环为金甲2

Question

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

<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应该始终等于目标accordion ID。因此，从上面的代码来看，{{article['Id']}}将是引导识别每个accordion元素的唯一ID。 同样从您的代码来看，第一个似乎是唯一打开的，因为所有.accordion-collapse都具有相同的ID。 注意：ID属性在整个页面中应该是唯一的。两个元素不应具有相同的ID。 HTML ID on w3schools

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