css - 液体默认展开菜单

我有一个液体下拉菜单，其中列出了仅在您单击时才会扩展的产品。我想出了如何在加载网站时默认打开它。
我只是为下拉列表找到了<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>

最佳答案

它不属于液体或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的css代码放入-扩展为大型设备的条件，例如：

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

关于css - 液体默认展开菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39462815/