动态创建的手风琴在 Django/python/html 项目中无法正常工作[关闭]

Question

我正在尝试构建一个 html 模板作为 Django 项目的一部分。它将包含动态手风琴（此类手风琴的数量由从views.py传递给它的值确定），并且每个手风琴中的内容也将从views.py动态传递（我什至还没有构建这部分）。

我试过谷歌搜索，但总是以两种情况之一结束。所有手风琴按钮仅打开/关闭第一个手风琴的地方。第二，手风琴按钮都不起作用。理想情况下，所有手风琴按钮都应该可以工作，并且每个按钮都需要打开/关闭自己的内容。我猜问题在于动态引用包含内容的 div。但我无法修复。

请帮忙！

代码：

<div class="container">
  <h2>Mock Tests</h2>
  <p>Click the category you wish to view.</p>
  @{int i=0;}
  {% for s in sections %}
  <div class="panel-group" id="accordion_@i">
    <div class="panel panel-default" id="panel_@i">
      <div class="panel-heading">
        <h4 class="panel-title">
          <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapseone_@i" href="#collapseOne_@i">{{ s.s_name }}</button>
        </h4>
      </div>
      <div id="collapseOne_@i" class="panel-collapse collapse in">
        <div class="panel-body">{{ s.s_name }}</div>
      </div>
    </div>
  </div>
  i++;
    {% endfor %}
  </div>

修改代码：

{% block body %}
<div class="container">
  <h2>Mock Tests</h2>
  <p>Click the category you wish to view.</p>

  <div class="panel-group" id="accordion">
    {% for s in sections %}
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <button type="button" class="btn btn-info" data-parent="#accordion" data-toggle="collapse" data-target="accordion_{{ forloop.counter }}" href="accordion_{{ forloop.counter }}">{{ s.s_name }}</button>
        </h4>
      </div>
      <div id="accordion_{{ forloop.counter }}" class="panel-collapse collapse in">
        <div class="panel-body">{{ s.s_name }}</div>
      </div>
    </div>
  {% endfor %}
  </div>    
  </div>

Answer 1

我不知道@{int i=0;} 应该做什么，但是您要么需要使用 for 循环并使用该索引查找一个部分，要么您可以使用 forloop 计数器，或者只是给出id是一个更好的名字

id="accordion_{{ forloop.counter }}"
id="accordion_{{ forloop.counter0 }}"
id="accordion_{{ s.s_name }}"

任何一个都足够了。