如何在 django 模板的引导程序中创建可折叠卡片？

Question

我有一张包含动态内容的可折叠卡片的表格。我从bootstrap 获取的代码如下所示：

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

问题

但是如你所见，每次折叠都是由multiCollapseExample1这个属性控制的。在我的 django 模板中，当我使用它时，单击任何关闭按钮时，只有第一张卡片会折叠，因为它的静态值为 1。我怎样才能给它一个动态值，以便每张卡片都能正确打开和关闭？我问的原因是因为我的代码非常复杂，并且从 views.py 函数返回了大约 10 多个参数，并且我正在迭代字典字典以以我想要的格式打印所有值。出于这个原因，我有大约 4-5 个嵌套的 for 循环，还有一个 if 语句检查 if 循环计数器是否与父循环计数器相同。我无法理解如何简单地解决这个问题。

这是我的实际完整代码：

<table class="table mb-0 table-striped loadingplan">
            <thead>
            <tr>
                <th>ID</th>
                <th>Vehicles</th>
                <th>Gross Weight</th>
                <th>Route</th>
                <th>Route Distance</th>
                <th>Route TAT</th>
                <th>ETD</th>
                <th>ETA</th>
                <th></th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            {% for d,t,r,y,w,f in open_route_info %}
                {% for k,v in open_trucks.items %}
                    {% if forloop.counter == forloop.parentloop.counter %}
                        <td class="align-middle">YNT1151<br>
                            <small class="align-right">{{ f }}% Filled</small>
                        </td>
                        <td>
                            {% for x in v %}
                                {% for y,z in x.items %}
                                    {{ y.display_name }}
                                {% endfor %}
                            {% endfor %}
                        </td>

                        {% for truck,value in v.items %}
                            <td class="align-middle">{{ truck }} {{ value }}<br>o
                                <a href="#">
                                    <small>Download Loading Plan {{ value.pk }}</small>
                                </a>
                            </td>
                        {% endfor %}

                        <td class="align-middle">{{ w }}KG</td>
                        <td class="align-middle">{{ k }}</td>
                        <td class="align-middle">{{ d }} KM</td>
                        <td class="align-middle">{{ t }}</td>
                        <td class="align-middle">{{ y }}</td>
                        <td class="align-middle">{{ scheduled_date }}</td>
                        <td class="align-middle">
                            <button class="btn" type="button" data-toggle="collapse"
                                    data-target="#multiCollapseExample2" aria-expanded="false"
                                    aria-controls="multiCollapseExample2"><img
                                    src="{% static 'img/cardopen.svg' %}" alt="card open"></button>
                        </td>
                        <td class="align-middle"><a href="#" class="btn btn-primary">Raise RFQ</a>
                        </td>
                        <tr class="collapse multi-collapse" id="multiCollapseExample2">
                            <td colspan="5">


                                <table class="table table-bordered">
                                    <thead>
                                    <tr>
                                        <th>SKU ID</th>
                                        <th>SKU Name</th>
                                        <th>Quantity</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    {% for x in v %}
                                        {% for y,z in x.items %}
                                            {% for w in z %}
                                                <tr>

                                                    <td>{{ w.name }}</td>
                                                    <td>{{ w.pid }}</td>
                                                    <td>{{ w.quantity }}</td>

                                                </tr>
                                            {% endfor %}

                                        {% endfor %}
                                    {% endfor %}

                                    </tbody>
                                </table>


                            </td>
                            <td colspan="5" class="align-middle">
                                <div class="card card-body iframecard">

                                    <iframe src="{{ r }}"></iframe>


                                </div>
                            </td>
                        </tr>

                    {% endif %}
                {% endfor %}
            {% endfor %}


            </tbody>
        </table>

我想要什么

我想要做的就是，将multiCollapseExample2 替换为与项目数长度相同的动态变量。我尝试在一个长度为项目数的列表上使用一个简单的循环，但它没有工作可能是因为 if 语句 {% if forloop.counter == forloop.parentloop.counter %}。

Answer 1

看起来您可以使用 2 个 for 循环及其变量为您的卡片创建一个唯一 ID。 像

data-target="#multiCollapse{{d}}{{t}}{{k}}{{v}}"

其中 d,t 来自外部 for 循环，k,v 来自内部循环。