为什么Bootstrap Collapse循环迭代时无法展示对应的不同项？

算力阿峰

2026-9-27

问题根因

所有折叠元素共用了同一个固定ID rel，Bootstrap的collapse组件会根据href锚点匹配对应ID的DOM元素，重复ID场景下只会命中第一个出现的目标元素，因此只有第一项点击生效，后续所有点击都会触发第一个折叠项的显隐。
嵌套循环场景下，内层循环的loop.index默认指向当前内层循环的计数，要获取外层循环的索引需要通过Jinja2的循环层级语法访问。

修复方案

Jinja2支持两种方式获取外层循环的索引：

方式1：给外层循环设置别名，内层直接调用别名的index属性，可读性更高
方式2：直接通过loop.parent.index访问上层循环的索引

修正后完整代码

{% for data_dict in data_list %}
    {# 给外层循环设置别名，内层可直接调用 #}
    {% set outer_loop = loop %}
    {% for key, data in data_dict.items() %}
        {% if data is iterable and data is mapping %}
        <dd>
            <a data-toggle="collapse" href="#rel-{{ outer_loop.index }}">{{ data.keys()|join(', ') }}</a>
            <div id="rel-{{ outer_loop.index }}" class="collapse">
                {{ data.values()|join(', ') }}
            </div>
        </dd>
        {% endif %}
    {% endfor %}
{% endfor %}