代码之家 › 专栏 › 技术社区 › KatrinaL

3级深木菜单(Wordpress)

timber menu wordpress

KatrinaL · 技术社区 · 8 年前

我对木材一点都不熟悉,但我正在帮助一个朋友完成一个用木材建造的项目。所以任何帮助都会有很大的帮助!

我只展示了前两层。有没有办法拜访孩子的孩子?

我在这里使用代码,并在child下添加了另一层 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 %}

1 回复 | 直到 8 年前

robertguss 8 年前

您可以通过嵌套循环来访问多层菜单。这是一段我已经测试过并可以使用的代码片段。

{% 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 是表示顶层/主层级上每个导航项目的变量。你循环通过 项目儿童 进入下一级或主/顶层中的子级。

然后要进入第三层,你需要循环 child.children 自从 child 表示第二级的变量。我们想通过这个第二级的子级进行循环。我们也是 third in child.children 。 third 是表示向下3级项目的变量。

我希望你能看到这里的模式,如果你有更深层次的物品,你可以继续这样做,尽管在某些时候可能会变得可笑。例如,如果您有嵌套5或6层深的项目。

让我知道这是否有意义,如果没有,如果你还有问题,我将非常乐意尝试以另一种方式解释。

干杯