我重复的 HTML Bootstrap 折叠功能仅适用于第一组

Question

所以我正在创建一个页面，该页面是一个目录，其中每个问题都有一组文章和作者。我正在实现一个函数，该函数在第四个元素之后剪切文章列表，并使用“查看更多”按钮折叠剩余的文章。在网站上，它会正确剪切列表并显示按钮，但此按钮仅在第一次出现时才能正常工作。如果您尝试单击所有其他“查看更多”按钮，它只会展开第一个列表，而不是应该展开的列表。

我想这与 ID 和类有关，但到目前为止我还没有找到任何解决方案。

     <div class="article-list">
         {% for article in issue.articles|slice:":4" %}
          <div class="section-article">
            <a href="{{ article.get_absolute_url }}"><p class="name">{{article.title}}</p></a>

            {% for author in article.contributors.all %}
              <a href="{{ author.get_absolute_url }}"><p class="no-decoration author">{{ author.name }}</p></a>
            {% endfor %}
          </div>
         {% endfor %}

         <!-- if there are more than 5 articles in an issue -->
         {% if issue.articles|slice:"5:" %}

            <!-- create a collapse div -->
             <div id="collapsearticle_{{ issue.id }}" class="collapse">
               {% for article in issue.articles|slice:"5:" %}
                 <div class="section-article">
                   <a href="{{ article.get_absolute_url }}"><p class="name">{{article.title}}</p></a>
                   {% for author in article.contributors.all %}
                     <a href="{{ author.get_absolute_url }}"><p class="no-decoration author">{{ author.name }}</p></a>
                   {% endfor %}
                 </div>
               {% endfor %}
             </div>

             <div class="text-center">
               <div class="btn" data-toggle="collapse" data-target="#collapsearticle_{{ issue.id }}"> View more &#8964; </div>
             </div>

         {% endif %}

       </div>

Answer 1

它基于下面的示例工作。也许你可以在浏览器上查看 issue_id

<div id="collapsearticle_1" class="collapse">
  <div class="section-article">
    <a href="{{ article.get_absolute_url }}"><p class="name">{{article.title}}</p></a> 
    <a href="{{ author.get_absolute_url }}"><p class="no-decoration author">{{ author.name }}</p></a> 
    <a href="{{ author.get_absolute_url }}"><p class="no-decoration author">{{ author.name }}</p></a> 
    <a href="{{ author.get_absolute_url }}"><p class="no-decoration author">{{ author.name }}</p></a> 
    <a href="{{ author.get_absolute_url }}"><p class="no-decoration author">{{ author.name }}</p></a> 
    <a href="{{ author.get_absolute_url }}"><p class="no-decoration author">{{ author.name }}</p></a> 
  </div>
</div>

<div class="text-center">
  <div class="btn" data-toggle="collapse" data-target="#collapsearticle_1"> View more &#8964; </div>
</div>

<div id="collapsearticle_2" class="collapse">
  <div class="section-article">
    <a href="{{ article.get_absolute_url }}"><p class="name">{{article.title}}</p></a> 
    <a href="{{ author.get_absolute_url }}"><p class="no-decoration author">{{ author.name }}</p></a> 
    <a href="{{ author.get_absolute_url }}"><p class="no-decoration author">{{ author.name }}</p></a> 
    <a href="{{ author.get_absolute_url }}"><p class="no-decoration author">{{ author.name }}</p></a> 
    <a href="{{ author.get_absolute_url }}"><p class="no-decoration author">{{ author.name }}</p></a> 
    <a href="{{ author.get_absolute_url }}"><p class="no-decoration author">{{ author.name }}</p></a> 
  </div>
</div>

<div class="text-center">
  <div class="btn" data-toggle="collapse" data-target="#collapsearticle_2"> View more &#8964; </div>
</div>