【问题标题】:Accordion expands all cards when clicked at any one点击任一卡片时,Accordion 会展开所有卡片
【发布时间】: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


【解决方案1】:

试试这个

<div class="row">
    <div class="col-md-12">
        <div class="accordion" id="accordionExample">
            {% for inv in invoices__ %}
            <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>

        {% endfor %}
    </div>
</div>
</div>

我将前 3 个 div 从内部循环移动到外部。这样,手风琴类(及其 ID)只出现一次,而不是每个循环。

祝你好运!

bootstrap 实例:见link

【讨论】:

  • 不,亲爱的,我没有为每张卡分配不同的类和 ID,我已修复它,谢谢
猜你喜欢
  • 2019-12-19
  • 2021-08-09
  • 2021-07-21
  • 1970-01-01
  • 2020-08-15
  • 2020-08-16
  • 1970-01-01
  • 2014-01-26
  • 2023-01-09
相关资源
最近更新 更多