javascript - 如何在 django 模板中创建多个折叠功能

Question

我创建了一个 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 %}

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

Answer 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 %}