您如何解决这个循环，以便“阅读更多”按钮仅在每张卡片中折叠？

Question

此代码创建了一个卡片组件，但阅读更多按钮折叠了所有卡片，但我只想在单击按钮时在每张卡片中单独折叠。

{% for job in jobs%}

  <div class="card w-100 mb-2">

    <div class="jobs card-body">

      <h5 class="card-title">Position: {{ job.title }}</h5>

      <h6 class="card-title font-weight-normal">Location: {{ job.location }}</h6>

      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>

      <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Read More</button>

      <a href="#" class="btn btn-primary">Apply</a>

      <div id="demo" class="collapse">

        <hr>

        <h6 class="">Requirements</h6>

          Lorem ipsum dolor sit amet, consectetur adipisicing elit,

          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

      </div>

    </div>

  </div>

{% endfor%}

Answer 1

问题是您有多个具有相同 ID 的元素（演示）。您需要以某种方式区分这些元素。我会使用loop.index{% for job in jobs%}&nbsp; <div class="card w-100 mb-2">&nbsp; &nbsp; <div class="jobs card-body">&nbsp; &nbsp; &nbsp; <h5 class="card-title">Position: {{ job.title }}</h5>&nbsp; &nbsp; &nbsp; <h6 class="card-title font-weight-normal">Location: {{ job.location }}</h6>&nbsp; &nbsp; &nbsp; <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>&nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo-{{loop.index}}">Read More</button>&nbsp; &nbsp; &nbsp; <a href="#" class="btn btn-primary">Apply</a>&nbsp; &nbsp; &nbsp; <div id="demo-{{loop.index}}" class="collapse">&nbsp; &nbsp; &nbsp; &nbsp; <hr>&nbsp; &nbsp; &nbsp; &nbsp; <h6 class="">Requirements</h6>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lorem ipsum dolor sit amet, consectetur adipisicing elit,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div>{% endfor%}

Answer 2

我假设它与所有被标记为演示的东西有关。<button type="button" class="btn btn-info" data-toggle="collapse"&nbsp;data-target="#demo"&nbsp;>阅读更多</button><div&nbsp;id="demo"&nbsp;class="collapse">我对神社没有经验也许你可以添加类似的东西data-target="#content{{job.id}}"<div id="content{{job.id}}"