如何在 django 模板中创建多个折叠功能答案

【问题标题】：How to create multiple collapse functionalities in django template如何在 django 模板中创建多个折叠功能
【发布时间】：2016-05-26 01:02:53
【问题描述】：

我创建了一个显示主题列表的 django 模板，我想为每个主题创建折叠功能，以便单击它时，它会显示可用的书籍。现在我已经使用了 django 模板功能

{% for subject in subjects%}
 <span data-subject="{{subject.id}}" data-toggle="collapse" data-target="#books_list">
    {{subject.name}}
 </span>
<div id="books_list">
{% for book in subject.books_set.all %}
<span>{{book.name}}</span>
{% endfor %}
</div>
 {% endfor %}

现在，当我单击任何主题时，它会打开第一个主题的书籍列表。我如何确保在点击特定主题时它只打开自己的书。

【问题讨论】：

我认为这与身份有关。对于每个书籍列表，它应该是唯一的。尝试将 id 中的 forloop.counter 添加到不同的列表中。

标签： javascript jquery python django django-templates

【解决方案1】：

您要为多个元素提供相同的 id，这绝不是一个好主意，您可以将主题的 id 附加到元素的目标/id 以赋予它们唯一的 id

{% for subject in subjects %}
    <span data-subject="{{subject.id}}"
          data-toggle="collapse" 
          data-target="#books_list{{ subject.id }}">
       {{subject.name}}
    </span>
    <div id="books_list{{ subject.id }}">
        {% for book in subject.books_set.all %}
            <span>{{book.name}}</span>
        {% endfor %}
    </div>
{% endfor %}

【讨论】：

太棒了。谢谢。所以这都是关于 id 的。
@AmanGupta - 是的，id 应该始终是唯一的，如果您发现自己需要一个非唯一标识符，您应该使用 class，但是是的，在这种情况下，它应该是唯一的