使用 Shopify 鏈接列表時單擊時顯示所有面板的手風琴表

Question

我有一個側邊欄菜單設置，它循環遍歷 shopify 個鏈接列表並輸出父子集合標題和 URL。 問題是，當我單擊其中一個錨標記時，它會打開所有錨鏈接，因為數據目標和 ID 不是唯一的。 我嘗試使用 Mat.random() 將 div id 更改為隨機數，但無法完成這項工作。

這是代碼

    {% for link in linklists[settings.mobile_linklist].links %}
    {% if link.links != blank %}
      <div class="nav-menu">
        <ul id="accordion">
          <li class="accordion">
            <span><a aria-controls="collapseOne"
               aria-expanded="false"
               class="collapsible"
               data-target="#collapseOne"
               data-toggle="collapse"
               href="#">{{ link.title }}
             </a></span>

            <div aria-labelledby="headingOne" class="collapse" id="collapseOne">
                <ul>
                  {% for childlink in link.links %}
                  <li>
                    <a href="{{childlink.url}}">{{childlink.title}}</a>
                  </li>
                  {% endfor %}
                </ul>
            </div>
          </li>

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

Answer 1

您可以使用forloop.index將 append 唯一值放入循環中 Shopify 液體

{% for link in linklists[settings.mobile_linklist].links %}
    {% if link.links != blank %}
      <div class="nav-menu">
        <ul id="accordion-{{forloop.index}}">
          <li class="accordion">
            <span><a aria-controls="collapseOne"
               aria-expanded="false"
               class="collapsible"
               data-target="#collapse{{forloop.index}}"
               data-toggle="collapse"
               href="#">{{ link.title }}
             </a></span>

            <div aria-labelledby="headingOne" class="collapse" id="collapse{{forloop.index}}">
                <ul>
                  {% for childlink in link.links %}
                  <li>
                    <a href="{{childlink.url}}">{{childlink.title}}</a>
                  </li>
                  {% endfor %}
                </ul>
            </div>
          </li>
        </ul>
      </div>
    {% endif %}
    {% endfor %}

你在這里閱讀了更多關於 forloop 的內容