使用twig循环实现bootstrap折叠

Question

我正在尝试在崩溃中实现引导程序崩溃，但它不能很好地工作。

这是我的代码;

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
{% for frame,value in object.getPortHierarchy() %}
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading-f-{{ frame }}">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-f-{{ frame }}" aria-expanded="true" aria-controls="collapse-f-{{ frame }}">
                    Frame #{{ frame }}
                </a>
            </h4>
        </div>
        <div id="collapse-f-{{ frame }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-f-{{ frame }}">
            <div class="panel-body">
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                {% for slot,value in value %}
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="heading-s-{{ slot }}">
                            <h4 class="panel-title">
                                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-s-{{ slot }}" aria-expanded="true" aria-controls="collapse-s-{{ slot }}">
                                    Slot #{{ slot }}
                                </a>
                            </h4>
                        </div>
                        <div id="collapse-s-{{ slot }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-s-{{ slot }}">
                            <div class="panel-body">
                                {% for port,value in value %}
                                    Port: {{ value }}</br>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endfor %}
</div>

但是当点击框架内的插槽时，框架也会关闭。我已经仔细检查了我的IDs和正确的数字，但问题仍然存在

Answer 1

也许是因为您拥有相同的ID #accordion，但ID应该是唯一的

{#THE FIRST ID#}    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
{% for frame,value in object.getPortHierarchy() %}
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="heading-f-{{ frame }}">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-f-{{ frame }}" aria-expanded="true" aria-controls="collapse-f-{{ frame }}">
                    Frame #{{ frame }}
                </a>
            </h4>
        </div>
        <div id="collapse-f-{{ frame }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-f-{{ frame }}">
            <div class="panel-body">
        {#HERE#}        <div class="panel-group" id="accordion-{{frame}}" role="tablist" aria-multiselectable="true">
                {% for slot,value in value %}
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="heading-s-{{ slot }}">
                            <h4 class="panel-title">
                    {#HERE#}            <a role="button" data-toggle="collapse" data-parent="#accordion-{{frame}}" href="#collapse-s-{{ slot }}" aria-expanded="true" aria-controls="collapse-s-{{ slot }}">
                                    Slot #{{ slot }}
                                </a>
                            </h4>
                        </div>
                        <div id="collapse-s-{{ slot }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-s-{{ slot }}">
                            <div class="panel-body">
                                {% for port,value in value %}
                                    Port: {{ value }}</br>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endfor %}
</div>