使用動態ID在django中摺疊列表組

Question

我正在嘗試使用動態ID進行引導摺疊。崩潰正在發揮作用，但它不能按預期工作。每個標題內都有多個項目，但當單擊標題時只顯示一個項目。這是我的index.html

<div class="row"> 
     <div class="col-md-offset-1 col-md-10"> 
      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
      <div class="panel panel-default"> 
       {% for subject in subjects %} 
       <div class="panel-heading" role="tab"> 
       <h4 class="panel-title"> 
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#c{{forloop.counter}}" 
          aria-expanded="false" aria-controls="c{{ forloop.counter}}"> 
        {{ subject }}</a></h4> 
       </div> 
       {% for practical in practicals %} 
       {% if practical.subject == subject %} 
       <div id="c{{forloop.counter}}" class="panel-collapse collapse in" role="tabpanel""> 
        <div class="list-group"> 
        <a href="{% url 'practicals:detail' practical.id %}">{{ practical }}</a> 
        </div> 
       </div> 
       {% endif %} 
       {% endfor %} 
      {% endfor %} 
      </div> 
      </div> 
     </div> 
    </div> 

我已經包含了鏈接到JS

我model.py是：

class Subject(models.Model): 
    subName = models.CharField(max_length=100) 

    def __str__(self): 
     return self.subName 

class Practical(models.Model): 
    title = models.CharField(max_length=500) 
    subject = models.ForeignKey(Subject, on_delete=models.CASCADE) 

    def __str__(self): 
     return self.title 

我一直在使用subject_id代替forloop.counter試過，但還是一樣問題。有誰能夠幫助我？

Answer 1

在我介紹主要解決方案之前，我想指出您所使用的兩個forloop.counter是兩個不同forloop的計數器。在href="#c{{forloop.counter}}"定義的頂部的錨點正在使用forloop計數器，用於% for subject in subjects %}。

但是我假設你要顯示的股利（與id="c{{forloop.counter}}"定義的使用{% for practical in practicals %}的for循環的計數器。

這將導致號碼被關閉。

現在，真正的問題是在你的html的結構中，也就是說，當你點擊錨點時，你只顯示一個元素，它所針對的id是唯一的唯一id，因此只顯示該元素。有兩種選擇你可以做...

1. 將元素列表div s包含在另一個div中。如果你這樣做，你將不得不針對包裝div而不是元素。

例如

{% for subject in subjects %} 
<div class="panel-heading"> 
    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#list__practical" 
         aria-expanded="false" aria-controls="list__practical"> 
         {{ subject }}</a> 
<div> 
<div id="list__practical"> 
    {% for practical in practicals %} 
    {# Your element html here #} 
    {% endfor %} 
</div> 
{% endfor %} 

關鍵是一個封裝實際的forloop和它的引用，而不是一個動態的ID的ID。

使用類代替IDS

例如

{% for subject in subjects %} 
<div class="panel-heading"> 
    <a role="button" data-toggle="collapse" data-parent="#accordion" href=".list-element" 
         aria-expanded="false" aria-controls="???"> 
         {{ subject }}</a> 
<div> 
{% for practical in practicals %} 
    <div class="list-element panel-collapse collapse in" role="tabpanel""> 
     <div class="list-group"> 
      <a href="{% url 'practicals:detail' practical.id %}">{{ practical }}</a> 
     </div> 
    </div> 
{% endfor %} 
{% endfor %} 

請注意，我從來沒有使用aria- *的東西無論之前是這樣的話我不知道該ID或類別的變化將如何影響這一點。