【发布时间】:2021-06-11 08:05:00
【问题描述】:
{% for inv in invoices__ %}
<div class="row">
<div class="col-md-12">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="{{inv.headingId}}">
<div class="row headerContiner">
<div class="col-md-10">
<h5 data-toggle="collapse" data-target="{{inv.collapseTarget}}">{{inv.ttl}}</h5>
</div>
<div class="col-md-2">
<a href="{% url 'invoice_update' inv.id__ %}" class="btn text-secondary px-0">
<i class="fa fa-edit fa-lg"></i></a>
<a href="{% url 'invoice_delete' inv.id__ %}" class="btn text-secondary px-0">
<i class="far fa-trash-alt fa-lg text-danger float-right"></i></a>
<a href="{% url 'invoice_details' inv.id__ %}" class="btn text-secondary px-0">
<i class="fas fa-file-invoice"></i></a>
<a href="{% url 'invoice_status' inv.id__ %}" class="btn text-secondary px-0">
<i class="fas fa-tasks"></i></a>
</div>
</div>
</div>
<div id="{{inv.collapseId}}" class="collapse" aria-labelledby="{{inv.headingId}}" data-parent="#accordionExample">
<div class="card-body">
<div class="row">
{% for stg in inv.stages %}
<div class="col-md-3 stags">
<h6 class="stepHeading">Step {{stg.counter__}}: {{stg.title}}</h6>
<p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
{% if stg.isCreated %}
<a href="{% url stg.editLink inv.id__ %}" class="btn text-secondary px-0">
<i class="fa fa-edit fa-lg"></i>
</a>
<a href="{% url stg.deleteLink inv.id__ %}" class="btn text-secondary px-0">
<i class="far fa-trash-alt fa-lg text-danger float-right"></i>
</a>
<a href="{% url stg.previewLink inv.id__ %}" class="btn text-secondary px-0">
<i class="fas fa-file-invoice"></i>
</a>
{% else %}
<a href="{% url stg.addLink %}" class="btn text-secondary px-0">
<i class="fas fa-plus"></i></a>
</a>
{%endif%}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
我正在尝试创建一个手风琴,我只想显示当前点击的卡片并折叠其他卡片,但在这里,当我点击一张卡片时,它会全部展开。
除此点击外,代码运行良好。请帮助我,在此先感谢
我正在从 django 视图动态创建类和 id,并将其作为上下文的一部分传输到模板
我没有添加任何 jquery 或 javascripts 事件。
【问题讨论】:
-
invoices__究竟包含什么? -
它包含关于供应商的不同发票的列表,只有折叠和展开部分不能正常工作,当点击任何卡片标题时它会展开所有手风琴卡片。这是唯一的问题,我只希望点击的卡片展开而不是全部自动展开
标签: html css django bootstrap-4