Question

我正在对存储在yaml文件中的一组内容进行循环，该文件概述了页面的目录。对于循环中的第一项，我想向该类添加“ is-active”修饰符。所有其他项目都不应收到此项目。 “处于活动状态”的类将导致我的手风琴打开/展开而不是关闭。

由于某种原因，我使用的语法无法正常工作。您能给我的任何帮助表示赞赏。

template.html

<!-- language: lang-html -->
<div class="grid-container leader-1">
  <div class="column-6 tablet-column-12">
    <aside class="js-accordion accordion tablet-hide" aria-role="complementary">
      {% for group in data.table_of_contents[section].navigation %}
      {% if group.hidden != true %}
      {% if loop.first == true %}
      <div class="accordion-section is-active">
      {% else %}
      <div class="accordion-section">
      {% endif %}
        <h4 class="accordion-title">
          <span class="accordion-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon"><path d="M28 9v5L16 26 4 14V9l12 12L28 9z"/>
            </svg>
          </span>
          {{ group.group }}
        </h4>
        <!-- accordion-menu -->
        <div class="accordion-content">
          {% for page in group.pages %}
          {% if page.title == 'Overview' %}
          <a href="#{{group.group | replace(" ", "-") | lower}}" class="side-nav-link">{{page.title}}</a>
          {% else %}
          <a href="#{{page.link}}" class="side-nav-link">{{page.title}}</a>
          {% endif %}
          {% endfor %}
        </div>
      {% endif %}
      {% endfor %}
      </div>
    </aside>
  </div>
</div>

由于某种原因，我的'is-active'修饰符被添加到所有'accordion-section'div中。我只希望将它添加到它创建的第一个“ accordion-section” div中，以便扩展第一个手风琴节，并关闭它下面的其余部分。

table-of-contents.yml

get-started:
title: 'Get Started'
base: 'get-started'
navigation:
  - group: 'Get Started'
    pages:
      - title: 'Overview'
        link: get-started
      - title: 'Static Files'
        link: static-files
      - title: 'Ruby Gem'
        link: ruby-gem
      - title: 'Whats New'
        link: whats-new
javascript:
title: 'JavaScript'
base: javascript
navigation:
  - group: 'Interactive Patterns'
    pages:
      - title: 'Overview'
        link: overview
      - title: 'Import calcite-web.js'
        link: importing
      - title: 'Event Bus'
        link: event-bus
  - group: 'Utility Functions'
    pages:
      - title: 'Overview'
        link: utility-functions
      - title: 'DOM Utilities'
        link: dom-utilities

目录持续了一段时间，但这是该结构的代表性示例。

Answer 1

您不能将double等于用于此比较。尝试简单地检查布尔值而不进行比较：

{% if loop.first %}
  <div class="accordion-section is-active">
{% else %}
  <div class="accordion-section">
{% endif %}

如果循环中的第一项，则Nunjucks将类添加到元素

1 个答案: