带有下拉菜单的移动导航

Question

我正在使用Brooklyn主题在Shopify网站上工作。导航包含一个名为“关于”的菜单项，然后下拉至“关于我们，联系我们和常见问题解答”。我的箭头图标确实使三个链接向下。但是，当我单击“关于”时，它将转到“关于我们”页面。我希望“关于”标签可以像向下箭头一样工作。我可以通过某种方式将两者连接起来，以使两次单击都获得相同的操作吗？ 我已附上一张用于示例的照片和以下代码：

<div data-section-id="{{ section.id }}" data-section-type="drawer-menu-section">

{% if section.settings.drawer_search_enable %}
  {% include 'search-bar', search_btn_style: 'btn--secondary', search_bar_location: 'search-bar--drawer' %}
{% endif %}

<ul class="mobile-nav">
  {% for link in linklists[section.settings.drawer_top_link_list].links %}
    {% if link.links != blank %}
      <li class="mobile-nav__item">
        <div class="mobile-nav__has-sublist">
          <a
            href="{{ link.url }}"
            class="mobile-nav__link"
            id="Label-{{ forloop.index }}"
            {% unless template.name == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>{{ link.title | escape }}</a>
          <div class="mobile-nav__toggle">
            <button type="button" class="mobile-nav__toggle-btn icon-fallback-text" aria-controls="Linklist-{{ forloop.index }}" aria-expanded="false">
              <span class="icon-fallback-text mobile-nav__toggle-open">
                <span class="icon icon-arrow-down" aria-hidden="true"></span>
                <span class="fallback-text">{{ 'general.drawers.expand_submenu' | t }} {{ link.title | escape }}</span>
              </span>
              <span class="icon-fallback-text mobile-nav__toggle-close">
                <span class="icon icon-minus" aria-hidden="true"></span>
                <span class="fallback-text">{{ 'general.drawers.collapse_submenu' | t }} {{ link.title | escape }}</span>
              </span>
            </button>
          </div>
        </div>
        <ul class="mobile-nav__sublist" id="Linklist-{{ forloop.index }}" aria-labelledby="Label-{{ forloop.index }}" role="navigation">
          {% assign parent_index = forloop.index %}
          {% for childlink in link.links %}
            {% if childlink.links != blank %}
            <li class="mobile-nav__item">
              <div class="mobile-nav__has-sublist">
                <a
                  href="{{ childlink.url }}"
                  class="mobile-nav__link"
                  id="Label-{{ parent_index }}-{{ forloop.index }}"
                  {% unless template.name == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
                    {{ childlink.title }}
                </a>
                <div class="mobile-nav__toggle">
                  <button type="button" class="mobile-nav__toggle-btn icon-fallback-text" aria-controls="Linklist-{{ parent_index }}-{{ forloop.index }}" aria-expanded="false">
                    <span class="icon-fallback-text mobile-nav__toggle-open">
                      <span class="icon icon-arrow-down" aria-hidden="true"> 
    </span>
                      <span class="fallback-text">{{ 'general.drawers.expand_submenu' | t }} {{ link.title | escape }}</span>
                    </span>
                    <span class="icon-fallback-text mobile-nav__toggle-close">
                      <span class="icon icon-minus" aria-hidden="true"> 
    </span>
                      <span class="fallback-text">{{ 'general.drawers.collapse_submenu' | t }} {{ link.title | escape }}</span>
                    </span>
                  </button>
                </div>
              </div>
              <ul class="mobile-nav__sublist mobile-nav__subsublist" id="Linklist-{{ parent_index }}-{{ forloop.index }}" aria-labelledby="Label-{{ parent_index }}-{{ forloop.index }}" role="navigation">
                {% for grandchildlink in childlink.links %}
                  <li class="mobile-nav__item">
                    <a
                      href="{{ grandchildlink.url }}"
                      class="mobile-nav__link"
                      {% unless template.name == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless%}>
                        {{ grandchildlink.title | escape }}
                    </a>
                  </li>
                {% endfor %}
              </ul>
            </li>
            {% else %}
            <li class="mobile-nav__item">
              <a
                href="{{ childlink.url }}"
                class="mobile-nav__link"
                {% unless template.name == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}>
                  {{ childlink.title | escape }}
              </a>
            </li>
            {% endif %}
          {% endfor %}
        </ul>
      </li>

      {% else %}
     <br>
      <li class="mobile-nav__item">
        <a
          href="{{ link.url }}"
          class="mobile-nav__link"
          {% unless template.name == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
            {{ link.title | escape }}
        </a>
      </li>

    {% endif %}
  {% endfor %}
  {% comment %}
    Spacer element
  {% endcomment %}
  <li class="mobile-nav__spacer"></li>

  {% comment %}
    If customer accounts are enabled, provide login and create account links
  {% endcomment %}
  {% if shop.customer_accounts_enabled %}
    {% if customer %}
      <li class="mobile-nav__item mobile-nav__item--secondary">
        <a href="/account">{{ 'layout.customer.account' | t }}</a>
      </li>
      <li class="mobile-nav__item mobile-nav__item--secondary">
        {{ 'layout.customer.log_out' | t | customer_logout_link }}
      </li>
    {% else %}
      <li class="mobile-nav__item mobile-nav__item--secondary">
        {{ 'layout.customer.log_in' | t | customer_login_link }}
      </li>
      <li class="mobile-nav__item mobile-nav__item--secondary">
        {{ 'layout.customer.create_account' | t | customer_register_link }}
      </li>
    {% endif %}
  {% endif %}
  {% for link in linklists[section.settings.drawer_bottom_link_list].links %}
    <li class="mobile-nav__item mobile-nav__item--secondary"><a href="{{ link.url }}">{{ link.title }}</a></li>
  {% endfor %}
</ul>
<!-- //mobile-nav -->

菜单截图：