python - Flask 和 Bootstrap 多个可折叠项，但它们各自只打开第一个

Question

我有一个 HTML 页面，显示由电子邮件填充的数据库。我将它们显示在可折叠的形式中，对于每个帖子，它的时间戳是切换它的内容，而内部结构是电子邮件本身。 HTML 页面的结构如下:

{% extends "base.html" %}
{% block content %}
{% for email in emails %}
<div><button class="btn" data-toggle="collapse" data-target="#demo">{{ email.timestamp }}</button>
<div id="demo" class="collapse">
{{ email.body }}
</div>
{% endfor %}
{% endblock %}

views.py的相关部分

@app.route('/cruz')
def cruz():
    u = Politician.query.get(1)
    emails = u.emails.all()
    return render_template('cruz.html',title='Ted Cruz',emails=emails)

它会生成一个如下所示的网页:/image/oPNJF.jpg

问题是，无论我单击哪个时间戳，只有第一个可折叠的会打开和关闭。我尝试了很多方法来修复它，主要是弄乱了 HTML 页面和 for block 以及我放置 {{ email.body }} 的位置，但我所做的一切似乎都不起作用。谁能看出哪里出了问题吗？

Answer 1

您每次都会为 div 生成相同的 id 属性:

<div id="demo" class="collapse">

您几乎肯定需要生成唯一的 ID。您可以通过添加循环索引来生成唯一的 ID:

<div id="demo-{{loop.index}}" class="collapse">