Question

所以我创建了一个页面，每个问题都有一组文章和作者。我实现了一个功能，在第四个元素之后剪切一个文章列表，并将剩下的文章折叠为＆＃39;查看更多＆＃39;按钮。在网站上，它会正确剪切列表并显示按钮，但此按钮仅在第一次显示时才能正常工作。如果您尝试点击其他所有＆＃39;查看更多＆＃39;按钮，它只扩展了第一个列表，而不是它应该扩展的列表。

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

＆＃13;

{{1}}

＆＃13;

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>

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

1 个答案: