将手风琴菜单设置为默认显示内容而不是将其隐藏在Liquid中

时间：2017-05-02 21:40:19

标签： html css accordion shopify liquid

在我的产品页面的侧栏上，有一个手风琴菜单中的过滤器。 预览： https://www.shoplovestitch.com/collections/new-arrival-dresses

我试图让手风琴菜单的过滤器默认为取消隐藏/打开，而不是默认为关闭。

{% comment %} *** FILTER BY *** {% endcomment %}
{% if collection.products.size > 0 %}

<h4 class="sidebar-title collapsed" data-toggle-target="sidebar-filter-group">
  Filter By
  <i class="fa fa-angle-up" aria-hidden="true"></i>
</h4>

<div id="sidebar-filter-group" class="sidebar-group">

  {% comment %} *** FILTER BY SIZE *** {% endcomment %}
  {% assign size_tags = settings.collection_sidebar_size_tags | strip_newlines | replace: ' ,', ',' | replace: ', ', ',' | split: ',' %}

  {% assign filters_selected_tags = '' %}
  {% for size_tag in size_tags %}
    {% assign tag_search = size_tag | replace: '-', ' ' %}
    {% if current_tags contains tag_search %}
      {% assign filters_selected_tags = filters_selected_tags | append: tag_search | append: ',' %}
    {% endif %}
  {% endfor %}
  {% assign filters_selected_tags = filters_selected_tags | split: ',' %}

  <div class="accordian-group" data-selected-count="{{ filters_selected_tags.size }}">
    <div class="accordian-heading">
      <a class="collapsed" href="#">{{ settings.collection_sidebar_size_title }}</a>
    </div>
    <div class="accordian-body">
      {% if filters_selected_tags.size > 0 %}

        {% assign current_tags_modifier = '' %}
        {% for t in current_tags %}
          {% unless filters_selected_tags contains t %}
            {% assign h = t | handle %}
            {% assign current_tags_modifier = current_tags_modifier | append: h | append: ',' %}
          {% endunless %}
        {% endfor %}
        {% assign current_tags_modifier = current_tags_modifier | split: ',' | join: '+' %}

        {% assign clear_selected_url = collection.url | append: '/' | append: current_tags_modifier %}

        <div class="clear-selected">
          <a href="{{ clear_selected_url }}">
            <i class="fa fa-times-circle" aria-hidden="true"></i> Clear {{ settings.collection_sidebar_size_title }}
          </a>
        </div>
      {% endif %}

      <ul class="multi-select buttons">
        {% for size_tag in size_tags %}

          {% assign tag_name = size_tag %}
          {% assign tag_search = tag_name | replace: '-', ' ' %}
          {% capture link_html %}
            {% if current_tags contains tag_search %}
              {{ tag_name | link_to_remove_tag: tag_search }}
            {% else %}
              {{ tag_name | link_to_add_tag: tag_search }}
            {% endif %}
          {% endcapture %}

          {% assign link_href = '' %}
          {% assign link_html = link_html | escape %}
          {% if link_html contains 'href=&quot;' %}
            {% assign link_html = link_html | split: 'href=&quot;' %}
            {% assign link_html = link_html[1] | split: '&quot;' %}
            {% assign link_href = link_html[0] %}
          {% endif %}

          {% if collection.tags contains tag_name %}
            <li>
              {% if current_tags contains tag_search %}
                <a class="active" title="{{ tag_name }}" href="{{ link_href }}">{{ tag_name }}</a>
              {% else %}
                <a title="{{ tag_name }}" href="{{ link_href }}">{{ tag_name }}</a>
              {% endif %}
            </li>
          {% endif %}
        {% endfor %}
      </ul>
    </div>
  </div>

  {% comment %} *** FILTER BY COLOR *** {% endcomment %}
  {% assign color_tags = settings.collection_sidebar_color_tags | strip_newlines | replace: ' ,', ',' | replace: ', ', ',' | split: ',' %}

  {% assign filters_selected_tags = '' %}
  {% for color_tag in color_tags %}
    {% assign tag_search = color_tag | replace: '-', ' ' %}
    {% if current_tags contains tag_search %}
      {% assign filters_selected_tags = filters_selected_tags | append: tag_search | append: ',' %}
    {% endif %}
  {% endfor %}
  {% assign filters_selected_tags = filters_selected_tags | split: ',' %}

  <div class="accordian-group" data-selected-count="{{ filters_selected_tags.size }}">
    <div class="accordian-heading">
      <a class="collapsed" href="#">{{ settings.collection_sidebar_color_title }}</a>
    </div>
    <div class="accordian-body">
      {% if filters_selected_tags.size > 0 %}

        {% assign current_tags_modifier = '' %}
        {% for t in current_tags %}
          {% unless filters_selected_tags contains t %}
            {% assign h = t | handle %}
            {% assign current_tags_modifier = current_tags_modifier | append: h | append: ',' %}
          {% endunless %}
        {% endfor %}
        {% assign current_tags_modifier = current_tags_modifier | split: ',' | join: '+' %}

        {% assign clear_selected_url = collection.url | append: '/' | append: current_tags_modifier %}

        <div class="clear-selected">
          <a href="{{ clear_selected_url }}">
            <i class="fa fa-times-circle" aria-hidden="true"></i> Clear {{ settings.collection_sidebar_color_title }}
          </a>
        </div>
      {% endif %}

      <ul class="multi-select color-swatches">
        {% for color_tag in color_tags %}
          {% assign color_swatch_src = color_tag | handle | prepend: 'swatch-' | append: '_icon.png' %}
          {% capture color_swatch %}
            <div class="swatch-border">
              <img src="{{ color_swatch_src | file_url }}" alt="{{ color_tag | escape }}" />
            </div>
          {% endcapture %}

          {% assign tag_name = color_tag %}
          {% assign tag_search = tag_name | replace: '-', ' ' %}
          {% capture link_html %}
            {% if current_tags contains tag_search %}
              {{ tag_name | link_to_remove_tag: tag_search }}
            {% else %}
              {{ tag_name | link_to_add_tag: tag_search }}
            {% endif %}
          {% endcapture %}

          {% assign link_href = '' %}
          {% assign link_html = link_html | escape %}
                {% if link_html contains 'href=&quot;' %}
                    {% assign link_html = link_html | split: 'href=&quot;' %}
                    {% assign link_html = link_html[1] | split: '&quot;' %}
                    {% assign link_href = link_html[0] %}
                {% endif %}

          {% if collection.tags contains tag_name %}
            <li>
              {% if current_tags contains tag_search %}
                <a class="active" title="{{ tag_name }}" href="{{ link_href }}">{{ color_swatch }}</a>
              {% else %}
                <a title="{{ tag_name }}" href="{{ link_href }}">{{ color_swatch }}</a>
              {% endif %}
            </li>
                        {% endif %}
        {% endfor %}
      </ul>
    </div>
  </div>

  {% comment %} *** FILTER BY PRICE *** {% endcomment %}
  {% assign price_tags = settings.collection_sidebar_price_tags | strip_newlines | replace: ' ,', ',' | replace: ', ', ',' | split: ',' %}

  {% assign filters_selected_tags = '' %}
  {% for price_tag in price_tags %}
    {% assign tag_search = price_tag | replace: '-', ' ' %}
    {% if current_tags contains price_tag %}
      {% assign filters_selected_tags = filters_selected_tags | append: price_tag | append: ',' %}
    {% endif %}
  {% endfor %}
  {% assign filters_selected_tags = filters_selected_tags | split: ',' %}

  <div class="accordian-group" data-selected-count="{{ filters_selected_tags.size }}">
    <div class="accordian-heading">
      <a class="collapsed" href="#">{{ settings.collection_sidebar_price_title }}</a>
    </div>
    <div class="accordian-body">
      {% if filters_selected_tags.size > 0 %}

        {% assign current_tags_modifier = '' %}
        {% for t in current_tags %}
          {% unless filters_selected_tags contains t %}
            {% assign h = t | handle %}
            {% assign current_tags_modifier = current_tags_modifier | append: h | append: ',' %}
          {% endunless %}
        {% endfor %}
        {% assign current_tags_modifier = current_tags_modifier | split: ',' | join: '+' %}

        {% assign clear_selected_url = collection.url | append: '/' | append: current_tags_modifier %}

        <div class="clear-selected">
          <a href="{{ clear_selected_url }}">
            <i class="fa fa-times-circle" aria-hidden="true"></i> Clear {{ settings.collection_sidebar_price_title }}
          </a>
        </div>
      {% endif %}

      <ul class="multi-select list">
        {% for price_tag in price_tags %}

          {% assign tag_name = price_tag %}
          {% assign tag_search = tag_name | replace: '-', ' ' %}

          {% capture link_html %}
            {% if current_tags contains tag_name %}
              {{ tag_name | link_to_remove_tag: tag_name }}
            {% else %}
              {{ tag_name | link_to_add_tag: tag_name }}
            {% endif %}
          {% endcapture %}

          {% assign link_href = '' %}
          {% assign link_html = link_html | escape %}
          {% if link_html contains 'href=&quot;' %}
            {% assign link_html = link_html | split: 'href=&quot;' %}
            {% assign link_html = link_html[1] | split: '&quot;' %}
            {% assign link_href = link_html[0] %}
          {% endif %}

          {% if collection.tags contains tag_name %}
            <li>
              {% if current_tags contains tag_name %}
                <a class="active" title="{{ tag_name }}" href="{{ link_href }}">{{ tag_name }}</a>
              {% else %}
                <a title="{{ tag_name }}" href="{{ link_href }}">{{ tag_name }}</a>
              {% endif %}
            </li>
          {% endif %}
        {% endfor %}
      </ul>
    </div>
  </div>

  {% comment %} *** SORT BY *** {% endcomment %}
  <div class="sidebar-sort">
    <div class="accordian-group" data-selected-count="0">
      <div class="accordian-heading">
        <a class="collapsed" href="#">Sort By</a>
      </div>
      <div class="accordian-body">
        {% include 'collection-toolbar' %}
      </div>
    </div>
  </div>
</div>
{ % endif %}

2 个答案:

答案 0 :(得分：0)

如果可以修改CSS，则将.accordion-body设置为display: block;而不是display: none; 

.accordion-body {
  display: block;
}

如果您的网站中还有其他.accordion-body，请根据需要定制此样式。

答案 1 :(得分：0)

您应该将visible css类添加到accordion-body。

更改以下内容： 

<div class="accordion-body">

要 

<div class="accordion-body visible">
相关问题
最新问题