手风琴 Table 在使用 Shopify 链接列表时单击时显示所有面板

Question

我有一个侧边栏菜单设置，它循环访问 shopify 链接列表并输出 parent 和 child collection 标题和 URL。问题是，当我单击其中一个锚标记时，它会打开所有锚链接，因为 data-target 和 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 将唯一值附加到 Shopify liquid 中的循环中

{% 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 的更多信息here

手风琴 Table 在使用 Shopify 链接列表时单击时显示所有面板

Accordian Table showing all panels when clicked when using Shopify linklists

javascript

jquery

liquid

shopify

bootstrap-4