液体既定の展開メニュー

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

それは、液体または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 {...} 
}