Question

我根本不熟悉木材，但正在帮助一位朋友完成一个用它建造的项目。所以任何帮助都会有很长的路要走！

我只有前两个层出现。有没有办法打电话给孩子的孩子？

我在这里使用代码，并在子https://timber.github.io/docs/guides/menus/

下添加了另一个层

{% if menu %}

<div class="header-menu-items">

  <div class="header-menu-item mod-title">
    <a href="{{ site.url }}" class="" rel="home">
      <div class="header-item-logo">
        <div class="sitelogo">{{ site.name }}</div>
      </div>
    </a>
  </div>

  {% for item in menu.get_items() %}
    <div class="header-menu-item {{ item.current ? 'is-active' : '' }}">

      <div class="header-menu-item-link">
        <a target="{{ item.target }}" href="{{ item.link }}">{{ item.title }}</a>
      </div>

      <div class="header-menu-item-triangle"></div>

      <div class="header-menu-item-mega {{ item.section_colour ? " mod-#{item.section_colour}" : '' }}">

        {% if item.master_object.thumbnail %}
          <div class="mega-image mod-image" style="background-image: url( {{item.master_object.thumbnail.src('thumbnail') }} )">
        {% else %}
          <div class="mega-image">
        {% endif %}
          {{ item.title }}
        </div>

        <div class="mega-items">
          {% for child in item.children %}
            <div class="mega-item">
              <a target="{{ child.target }}" href="{{ child.link }}">
                <span class="mega-item-title">{{ child.title }}<br /></span>
                <span class="mega-item-excerpt">Mega menu description lorem ipsum dolores</span>
              </a>
            </div>
            {% for child in child.children %}
               Just testing to see if it'll even show up first before applying style<br />
               {{ child.title }}<br />
            {% endfor %}
          {% endfor %}
        </div>
      </div>


    </div>
  {% endfor %}

</div>
{% endif %}

Answer 1

您可以通过嵌套彼此内部的循环来访问多个层的菜单。这是我测试过的代码片段。

{% for item in menu__main.items %} {# This is the top level #}
  <p>{{ item }}</p>

  {% if item.children %}
    {% for child in item.children %} {# 2nd Level #}
      <p><em>{{ child }}</em></p>

      {% if child.children %}
        {% for third in child.children %} {# 3rd Level #}
          <p><strong>{{ third }}</strong></p>
        {% endfor %} {# for third in child.children #}
      {% endif %} {# if child.children #}

    {% endfor %} {# for child in item.children #}
  {% endif %} {# if item.children #}
{% endfor %} {# for item in menu__main.items #}

我已经在行尾添加了评论，希望能够更清楚地说明这一点。所以在顶部，您正在遍历item in menu__main.items

然后为了让孩子们进入这些孩子，你可以遍历item.children，因为item是代表顶层/主要水平的每个导航项目的变量。循环遍历item.children以进入下一级或主/顶级内的子级。

然后进入第三级，你循环child.children，因为child是代表第二级的变量。我们想要遍历这个二级的孩子们。所以我们third in child.children。 third是表示3个级别的项目的变量。

我希望你能在这里看到这种模式，如果你有更深层次的物品，你可以继续这样做，虽然在某些时候它可能会变得荒谬。就像你有5层或6层深的物品一样。

让我知道如果这是有道理的，如果不是的话，如果你还有问题，我会非常乐意尝试用另一种方式解释它。

干杯

3级深木菜单（Wordpress）

1 个答案: