Question

我对Twig还很新。我正在尝试为网站构建下拉菜单。我有多个项目需要分成列。我知道这个问题被问了一百万次，但我无法弄清楚如何用Twig做到这一点。我想要一个大的列表，分为14个项目的多个ul。

让我说我有这个：

<ul class="menu">
 {% for category in shop.categories %}
   <li class="item">
      {{ category.title }}
       {% if category.subs %}
         <ul class="subnav">           
           {% for category in category.subs %}
             <li></li> //can be up to 40 items
            {% endfor %}
          </ul>
          {% endif %}
      </li>
  {% endfor %}
</ul>

我无法使用CSS3列，因为每个列表的长度各不相同。据我所知，你不能在CSS中告诉你每个列表需要14个项目???

我这样试过this solution：

{% for category in shop.categories %}
  <li class="item">
     {{ category.title }}
        {% if category.subs | length %}
        {% set categoriesPerColumn = (category.subs | length // 3) + 1 %}
          <ul class="subnav">

           {% for category in category.subs %}

           {% if loop.index % categoriesPerColumn == 1 %}
            <li class="col-md-4">
              <ul>
            {% endif %}

             <li>{{ category.title }}</li>

            {% if loop.index % categoriesPerColumn == 0 or loop.last %}
           </ul>
          </li>
         {% endif %}

        {% endfor %}

我最后得到的子菜单分为3列。我试图实现的是将整个列表分成14个项目的列。根据列表的长度将导致不同的列数量。所以我不想设置一定数量的列。

我做错了什么？或者我怎样才能实现我的问题？

我已经阅读了Twig的batch功能，但是没有给我预期的结果。

UPDATE1 我添加了一个div列，以显示我尝试实现的目标。我知道这不是正确的，只是为了展示!!

<ul class="nav">

    {% for category in shop.categories %}
     <li class="item{% if loop.last and theme.hide_brands_button %} last{% endif %}">
       <a class="itemLink" href="{{ category.url | url }}" title="{{ category.title }}">{{ category.title }}</a>

         {% if category.subs | length %}

          <ul class="subnav">
            {% for batch in category.subs | batch(14) %}
             <div class="column">
              {% for category in category.subs %}
                <li><a class="subitemLink" href="{{ category.url | url }}" title="{{ category.title }}">{{ category.title }}</a></li>
              {% endfor %}
             </div>
           {% endfor %}
          </ul>

        {% endif %}
      </li>
     {% endfor %}
</ul>

这给我一个结果：

<ul class="subnav">
    <div class="column">
        <li></li>
        //complete list
    </div>
    <div class="column">
        <li></li>
        //complete list
    </div>
    <div class="column">
        <li></li>
        //complete list
    </div>
    <div class="column">
        <li></li>
        //complete list
    </div>
</ul>

有人可以帮我这个吗？如果不能做到这一点有一个简洁的jQuery解决方案吗？

Answer 1

我认为category.subs是一个二维数组，如果是这样的话，你需要再做一个循环：

<ul class="menu">
{% for category in shop.categories %}
<li class="item">
    {{ category.title }}

    {% if category.subs | length %}
        {% for batch in category.subs|batch(14) %}
            <ul class="subnav">
            {% for category in batch %}
                <li>{{ category.title }}</li>
            {% endfor %}
            </ul>
        {% endfor %}
    {% endif %}
</li>
{% endfor %}
</ul>

使用Twig将长列表分成列

1 个答案: