时间戳

首页 > 解决方案 > Setting Shopify List Links Active

hyperlink - Setting Shopify List Links Active

问题描述

I am trying to set an active state on a link that sits within a list as the dropdown anchor. I have all the links within the drop-down menu working with active states on the LI's and a class name of highlight on the links themselves.

See code below.

<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>

There is a link with a class name of dlink.

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

This is the link I need to highlight when a link from the 'submenu' aka sub_links is active.

As you can see, I have tried various if statements throughout, but on that one link, these if statements do not seem to work.

Thanks in advance for any help.

标签： hyperlinkshopifyshopify-template

解决方案

你试过这个吗？

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

推荐阅读