设置 Shopify 列表链接处于活动状态

Question

我正在尝试在位于列表中的链接上设置活动状态作为下拉锚点。我在下拉菜单中的所有链接都使用 LI 上的活动状态以及链接本身的类名 highlight。

参见下面的代码。

<ul class="nav">
  {% for link in linklists[section.settings.main_nav].links %}
    {% if link.links != blank %}
      <li class="dropdown has_sub_menu" aria-haspopup="true" aria-expanded="false">
        <a class="dlink" href="{{ link.url }}">{{ link.title | escape }}</a>
        <ul class="submenu">
          {% for sub_link in link.links %}
            {% if sub_link.links != blank %}
              <li class="nest has_sub_menu {% if sub_link.active %}active{% if sub_link.child_active %}child-active{% endif %}{% endif %}" aria-haspopup="true" aria-expanded="false">
                <a href="{{ sub_link.url }}" {% if sub_link.current %}class="highlight"{% endif %}>{{ sub_link.title | escape }}</a>
                <ul class="nested">
                  {% for sub_sub_link in sub_link.links %}
                    <li {% if sub_sub_link.active %}class="active {% if sub_sub_link.child_active %}child-active{% endif %}"{% endif %}>
                      <a href="{{ sub_sub_link.url }}" {% if sub_sub_link.current %}class="highlight"{% endif %}>{{ sub_sub_link.title }}</a>
                    </li>
                  {% endfor %}
                </ul>
              </li>
            {% else %}
              <li {% if sub_link.active %}class="active {% if sub_link.child_active %}child-active{% endif %}"{% endif %}>
                <a href="{{ sub_link.url }}" {% if sub_link.current %}class="highlight"{% endif %}>
                  {{ sub_link.title | escape }}
                </a>
              </li>
            {% endif %}
          {% endfor %}
        </ul>
      </li>
    {% else %}
      <li {% if link.active %}class="active {% if link.child_active %}child-active{% endif %}"{% endif %}>
        <a href="{{ link.url }}" {% if link.current %}class="highlight"{% endif %}>
          {{ link.title | escape }}
        </a>
      </li>
    {% endif %}
  {% endfor %}
</ul>

有一个类名为 dlink 的链接。

<a class="dlink" href="{{ link.url }}">{{ link.title | escape }}</a>

当“子菜单”（即 sub_links）中的链接处于活动状态时，我需要突出显示此链接。

如您所见，我自始至终尝试了各种 if 语句，但在那个链接上，这些 if 语句似乎不起作用。

提前感谢您的帮助。

Answer 1

你试过了吗？

<a class="dlink{% if link.active or link.child_active %} active{% endif %}" href="{{ link.url }}">{{ link.title | escape }}</a>