shopify - Forloop 打破了布局

Question

我有从元字段中获取的这些数据。我遇到的问题是循环破坏了我的布局，我似乎可以弄清楚

<div class="sidekick-body">
    <div class="accordion">
        <article>
            {% for entry in shop.metafields.navigation.collection_structure %}
            {% assign entry = entry | json %}
            {% if entry.parent == block.settings.collection-handle %}
            {% if entry.rank == 2 %}
        <!-- </article>
        <article> -->
            <div class="header">
                <a href="/collections/{{ entry.handle }}">
                    {{- entry.title | replace: '\', '' -}}
                </a>
                <i class="fas fa-chevron-down"></i>
            </div>
            <div class="panel">
                <ul class="mobile-nav">
                    {% else %}
                    <li><a href="/collections/{{ entry.handle }}" class="mobile-nav-item mobile-nav-item-subcategory">{{- entry.title | replace:
                            '\',
                            '' -}}</a></li>
                {% endif %}
                {% endif %}
                {% endfor %}
                </ul>
            </div>
        </article> 
    </div>
</div>

这很好用，没有手风琴

        <article>
            {% for entry in shop.metafields.navigation.collection_structure %}
            {% assign entry = entry | json %}
            {% if entry.parent == block.settings.collection-handle %}
            {% if entry.rank == 2 %}

            <div class="header">
                <a href="/collections/{{ entry.handle }}">
                    {{- entry.title | replace: '\', '' -}}
                </a>
                <i class="fas fa-chevron-down"></i>
            </div>
            {% else %}
            <!-- <div class="panel"> -->
                <ul class="mobile-nav">
                    <li>
                        <a href="/collections/{{ entry.handle }}" class="mobile-nav-item mobile-nav-item-subcategory">
                            {{- entry.title | replace:'\','' -}}
                        </a>
                    </li>
                </ul>
            <!-- </div> -->
            {% endif %}
            {% endif %}
            {% endfor %}
        </article> 

但我需要手风琴，我的设计需要手风琴，否则页面会太长，不利于用户体验

标签： shopifyliquid