当一个被点击时，Bootstrap 折叠展开所有卡片答案

【问题标题】：Bootstrap collapse expanding all cards when one is clicked当一个被点击时，Bootstrap 折叠展开所有卡片
【发布时间】：2019-12-19 03:54:42
【问题描述】：

您好，我正在尝试对我的 django 应用程序的一部分使用 bootstrap collapse。

这是我目前的实现：

{% extends 'base.html' %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-6">
            <div class="card">

                <h1 class="text-center">Recent reports</h1>

                <div class="accordion" id="accordionExample">

                    {% for report in reports %}

                    <div class="card">

                        <div class="card-header" id="report_{{ loop.counter }}">

                            <h2 class="mb-0">

                                {% if loop.counter == 1 %}

                                <button class="btn btn-link" type="button" data-toggle="collapse"
                                    data-target="#collapse{{ loop.counter }}" aria-expanded="true"
                                    aria-controls="collapse{{ loop.counter }}">

                                    Report #{{ report.report_number }}

                                </button>

                                {% else %}

                                <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
                                    data-target="#collapse{{ loop.counter }}" aria-expanded="false"
                                    aria-controls="collapse{{ loop.counter }}">

                                    Report #{{ report.report_number }}

                                </button>

                                {% endif %}

                            </h2>

                        </div>

                        <div id="collapse{{ loop.counter }}" class="collapse"
                            aria-labelledby="report_{{ loop.counter }}" data-parent="#accordionExample">

                            <div class="card-body">

                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <th scope="row">Date</th>
                                            <td>{{ report.datetime_submitted }}</td>
                                        </tr>
                                        <tr>
                                            <th scope="row">XYZ</th>
                                            <td>{{ report.xyz }}</td>
                                        </tr>
                                        .....
                                    </tbody>
                                </table>

                            </div>

                        </div>

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

我遇到了一个问题，当我点击 card-header 卡片时，all 折叠 card-body 类元素会展开，而不是相关元素（这是所需的行为）。

任何有关如何解决此问题的指导将不胜感激。

【问题讨论】：

标签： html css django bootstrap-4 jinja2

【解决方案1】：

菜鸟错误：我通过使用{{ forloop.counter }} 而不是{{ loop.counter }} 解决了这个问题。

【讨论】：

【解决方案2】：

使用{{loop.index}} 代替{{loop.counter}}。

【讨论】：

感谢您的回复@Ahmed Nuaman。我试过了，但还是一样

【解决方案3】：

如果您将卡片放在带有 display:flex 的 div 中，这似乎也会导致所有卡片主体类一起展开和折叠。 #itsafeature

【讨论】：