液体默认扩展菜单

Question

我有一个液体下拉菜单，其中包含仅在您单击时才会展开的产品列表。我想出了如何在加载网站时默认打开它。 我只是在我的下拉列表中找到了<ul> 标记并将其更改为：

 <ul id="Collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expanded" aria-hidden="false">

到这里：

 <ul id="Collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expand" aria-hidden="false">

但是，我也希望它在小屏幕上默认关闭。

到目前为止，我还没有找到允许我这样做的解决方案。我对液体和 CSS 解决方案持开放态度。有人有什么想法吗？

这是我现在使用默认展开的代码：

 <div class="grid">


  <nav class="grid__item small--text-center medium-up--one-fifth" id="makeShort" role="navigation">
    <hr class="hr--small medium-up--hide">
    <button data-target="site-nav" id="ToggleMobileMenu" class="mobile-menu-icon medium-up--hide" aria-haspopup="true" aria-owns="SiteNav">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
      <span class="icon__fallback-text">{{ 'layout.navigation.menu' | t }}</span>
    </button>

    <div id="SiteNav" class="site-nav" role="menu">
      <ul class="list--nav">
        {% for link in menus.main-menu.links %}
          {% assign child_list_handle = link.title | handleize %}
          {% if menus[child_list_handle].links != blank %}
            <li class="site-nav--has-submenu site-nav__element">
              {% if link.title == 'Shop' %}
              <button class="site-nav__link btn--link site-nav__expand hidden" aria-expanded="false" aria-controls="Collapsible{{ forloop.index }}">
                {{ link.title }}

                <span>+</span>
              </button>
              <button class="site-nav__link btn--link site-nav__collapse" aria-expanded="true" aria-controls="Collapsible{{ forloop.index }}">
                {{ link.title }}
                <span>-</span>
              </button>

              <ul id="Collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expand" aria-hidden="false">
                {% for childlink in menus[child_list_handle].links %}
                  <li class="{% if childlink.active or collection.current_type == childlink.title or collection.current_vendor == childlink.title %}{% unless forloop.first and childlink.title contains 'All' and current_tags.size > 0 %} site-nav--active {% endunless %}{% endif %}">

                    <a href="{{ childlink.url }}" class="site-nav__link">{{ childlink.title | escape }}</a>
                  </li>
                {% endfor %}
              </ul>
            </li>
            {% else %}
                <button class="site-nav__link btn--link site-nav__expand hidden" id="hideOnLargeScreen" aria-expanded="false" aria-controls="Collapsible{{ forloop.index }}">
                {{ link.title }}

                <span>+</span>
              </button>
              <button class="site-nav__link btn--link site-nav__collapse" id="hideOnLargeScreen" aria-expanded="true" aria-controls="Collapsible{{ forloop.index }}">
                {{ link.title }}
                <span>-</span>
              </button>

              <ul id="Collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expanded" id="hideOnLargeScreen" aria-hidden="false">
                {% for childlink in menus[child_list_handle].links %}
                  <li class="{% if childlink.active or collection.current_type == childlink.title or collection.current_vendor == childlink.title %}{% unless forloop.first and childlink.title contains 'All' and current_tags.size > 0 %} site-nav--active {% endunless %}{% endif %}">

                    <a href="{{ childlink.url }}" class="site-nav__link" id="hideOnLargeScreen">{{ childlink.title | escape }}</a>
                  </li>
                {% endfor %}
              </ul>


            {% endif %}
          {% else %}
            <li class="site-nav__element {% if link.active %}site-nav--active{% endif %}">
              {% if link.title == 'Shop' %}
                <a href="{{ link.url }}" class="site-nav__link">{{ link.title }}</a>
              {% else %}
                <a href="{{ link.url }}" class="site-nav__link" id="hideOnLargeScreen">{{ link.title }}</a>
              {% endif %}
            </li>
          {% endif %}
        {% endfor %}
        {% if shop.customer_accounts_enabled %}
          {% if customer %}
            <li>
              <a href="/account" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.account' | t }}</a>
            </li>
            <li>
              <a href="/account/logout" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.log_out' | t }}</a>
            </li>
          {% else %}
            <li>
              <a href="/account/login" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.log_in' | t }}</a>
            </li>
            <li>
              <a href="/account/register" class="site-nav__link site-nav--account medium-up--hide">{{ 'layout.customer.create_account' | t }}</a>
        </li>
          {% endif %}
        {% endif %}
      </ul>
     {% include 'custom.social-bar' %}
    </div>
    <hr class="medium-up--hide hr--small {% if template == 'index' %}{% if settings.home_section_1 == 'banner-image' or settings.home_section_1 == 'featured-products'  %}hr--border-bottom{% endif %}{% endif %}">
  </nav>

Answer 1

它不属于 Liquid 或 Shopify。您可以使用常见的解决方案轻松做到这一点。例如，您可以通过将类似这样的内容放入主题 js 文件中来使用 jQuery：

$( window ).resize(function() {
    if ($(window).width() < 700 ) { // Size of "small"
       $('.list--nav ul').addClass('site-nav__submenu--expanded').removeClass('site-nav__submenu--expand');
    } else {
       $('.list--nav ul').addClass('site-nav__submenu--expand').removeClass('site-nav__submenu--expanded');
    }
});

但您也可以将 .site-nav__submenu--expand 的 css 代码放入大型设备的条件中，例如：

@media (min-width:960px) {
    .site-nav__submenu--expand {...}
}