django 中的 bootstrap 4 崩溃（手风琴表）

Question

我已经在 django 模板中发布了一个表的代码，该模板是使用 views.py 中的数组动态生成的。我添加了一个 bootstrap4 折叠，它在单击 V 形按钮时运行。但是，它显示了所有隐藏的折叠，而不仅仅是该给定行的可折叠数据（参见下面的 img）。

我知道我可以动态设置 id，但我没有任何运气将函数传递给“data-target”属性。

<table class="table table-hover">
    <thead class>
    <tr>
        <th style="width:5%"></th>
        <th>Sample</th>
        <th>Reference</th>
        <th>Cost</th>
        <th>Sum</th>
    </tr>
    </thead>

    <tbody>
    <div class="container" id="accordion">
        <div class="card">
            {% for r in result %}
                <tr>
                    <td>
                        <button type="button" class="fa fa-chevron-right rotate" data-toggle="collapse"
                                data-target="#demo" onclick="">
                        </button>
                    </td>

                    <td> {{ r.split.0 }}  </td> <!-- sample word -->
                    <td> {{ r.split.2 }}</td> <!-- ref word -->
                    <td> {{ r.split.4 }}</td> <!-- cost -->
                    <td> {{ r.split.3 }}</td> <!-- sum -->
                </tr>

                <tr>
                    <td id="demo" class="collapse" colspan="5" >

                        <!-- COLLAPSE CONTENT -->
                    </td>
                </tr>
            {% endfor %}
        </div>
    </div>
    </tbody>

</table>

Answer 1

“toogle 按钮”有这个 HTML 代码：

<button type="button" class="fa fa-chevron-right rotate" data-toggle="collapse"
        data-target="#demo">

可折叠的内容如下：

<td id="demo" class="collapse">[...]</td>

每个切换按钮显示或隐藏页面中的所有可折叠内容都是正常的，因为所有这些元素都与同一个 #demo 标识符相关。

您必须确保可折叠内容的 id 在整个文档中是唯一的，并确保相应的按钮引用相同的唯一 id。也许使用你的结果 id（来自上下文变量）来做这样的事情：

<button type="button" class="fa fa-chevron-right rotate" data-toggle="collapse"
        data-target="#demo-{{ r.pk }}">

<td id="demo-{{ r.pk }}" class="collapse">[...]</td>

编辑：当然，您必须使其适应您的数据。在这个例子中，我想你的列表 result 包含许多模型实例，所以在每个结果 r 中，值 r.pk 是唯一的。 在您的模板中，如果 results 包含其他内容，您必须确保从每个值中提取唯一的 str 或 int 以使您写入 HTML 的 id 唯一。

可能是demo-{{ r.split.6 }} 或demo-{{ r.a_unique_attr_in_my_object }} 或demo-{{ r.slugify }}。