Question

嗨，我正尝试在我的django应用程序的一部分中使用bootstrap折叠。

这是我到目前为止的实现：

{% 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卡时，所有折叠类card-body的元素展开而只与相关的元素相反（这是所需的）行为）。

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

Answer 1

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

Answer 2

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

Answer 3

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

当单击一张卡时，Bootstrap折叠将展开所有卡

3 个答案: