此代碼創建了一個卡片組件，但閱讀更多按鈕折疊了所有卡片，但我只想在單擊按鈕時在每張卡片中單獨折疊。{% 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%}
2 回答
慕斯709654
TA貢獻1840條經驗 獲得超5個贊
問題是您有多個具有相同 ID 的元素（演示）。您需要以某種方式區分這些元素。我會使用loop.index
{% 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-{{loop.index}}">Read More</button>
<a href="#" class="btn btn-primary">Apply</a>
<div id="demo-{{loop.index}}" 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%}
拉丁的傳說
TA貢獻1789條經驗 獲得超8個贊
我假設它與所有被標記為演示的東西有關。
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" >閱讀更多</button>
<div id="demo" class="collapse">
我對神社沒有經驗也許你可以添加類似的東西data-target="#content{{job.id}}"<div id="content{{job.id}}"
添加回答
舉報
0/150
提交
取消