Bootstrap手风琴动态ID关联问题求助

这个问题其实很好破局——核心就是利用循环变量动态生成唯一的ID，所谓“鸡生蛋还是蛋生鸡”的困惑，本质是没意识到在模板循环的每一次迭代里，你已经握有可以用来构建唯一标识的变量了。

具体修改方案 #

我们可以借助Django模板自带的slugify过滤器（它能把字符串转换成合法的HTML ID格式，自动去掉空格、特殊字符），用循环里的key、key2组合生成唯一的ID、href和无障碍属性值，确保每个手风琴触发按钮和对应的折叠面板精准绑定。

修改后的代码如下：

{% for key, value in transactions.items %}
<div id="accordion">
  <div class="card">
    <div class="card-header" id="heading-{{ key|slugify }}">
      <h5 class="mb-0">
        <a role="button" data-toggle="collapse" 
           href="#collapse-{{ key|slugify }}" 
           aria-expanded="true" 
           aria-controls="collapse-{{ key|slugify }}">
          {{ key }}
        </a>
      </h5>
    </div>
    {% for key2, value2 in value.items %}
    <div id="collapse-{{ key|slugify }}" class="collapse show" 
         data-parent="#accordion" 
         aria-labelledby="heading-{{ key|slugify }}">
      <div class="card-body">
        <div id="accordion-{{ key|slugify }}">
          <div class="card">
            <div class="card-header" id="heading-{{ key|slugify }}-{{ key2|slugify }}">
              <h5 class="mb-0">
                <a class="collapsed" role="button" data-toggle="collapse" 
                   href="#collapse-{{ key|slugify }}-{{ key2|slugify }}" 
                   aria-expanded="false" 
                   aria-controls="collapse-{{ key|slugify }}-{{ key2|slugify }}">
                  {{ key2 }}
                </a>
              </h5>
            </div>
            <div id="collapse-{{ key|slugify }}-{{ key2|slugify }}" class="collapse" 
                 data-parent="#accordion-{{ key|slugify }}" 
                 aria-labelledby="heading-{{ key|slugify }}-{{ key2|slugify }}">
              <div class="card-body">
                {% for tr in value2 %}
                <p>{{ tr.description }}</p>
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endfor %}

关键修改点说明 #

• 外层手风琴唯一标识：用key|slugify生成专属ID，比如key是"2024年5月交易"，处理后会变成2024年5月交易，最终得到heading-2024年5月交易和collapse-2024年5月交易，确保每个外层面板不会重复。
• 内层手风琴唯一标识：组合key|slugify和key2|slugify生成更具体的ID，比如collapse-2024年5月交易-工资收入，彻底避免内层面板ID冲突。
• 属性精准绑定：按钮的href直接指向对应折叠面板的ID，aria-controls和折叠面板的aria-labelledby也一一对应，既符合Bootstrap手风琴的交互规范，也满足无障碍访问要求。
• 修复结构缺失：补上了原来内层折叠面板缺少的card-body包裹，保证Bootstrap样式正常渲染。

这样修改后，每次循环迭代都会生成一组独立且关联的标识，按钮点击就能精准控制对应的折叠面板，完美解决你的问题。

内容的提问来源于stack exchange，提问作者Dave