将Jinja与Materialize的可折叠元素一起使用不会显示

Question

我正在使用Python和jinja（PyMongo）创建一个简单的配方数据库站点。我已将其与MongoDB连接，并且Jinja块内容可以正常显示该DB的信息。我想使用Materialize可折叠元素，当我自己实现该元素时，效果也很好。当我尝试将两者结合并在Jinja中添加一个简单的for循环时，Materialize可折叠元素停止工作。我要去哪里错了？

{% extends 'base.html' %} {% block content %} {% for recipe in recipes %} {{recipe.recipe_name}} {{recipe.course_name}} {{recipe.course_description}} {{recipe.cooking_time}} {{recipe.preparation_time}} {{recipe.course_ingredients}} {% endfor %}

<ul class="collapsible popout">
    <li>
        <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
</ul>

{% endblock %}

它显示来自DB Fine的块内容以及可折叠元素。 请参见下面的图片

一旦将可折叠元素包装在for循环中，它将停止工作。顶部的块内容仍显示，但可折叠空间为空白。

{% extends 'base.html' %} {% block content %} {% for recipe in recipes %} {{recipe.recipe_name}} {{recipe.course_name}} {{recipe.course_description}} {{recipe.cooking_time}} {{recipe.preparation_time}} {{recipe.course_ingredients}} {% endfor %}

<ul class="collapsible popout">
    {% for recipe in recipes %}
    <li>
        <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    {% endfor %}

</ul>

{% endblock %}

由于我还没有实现任何块元素，但是我只是想展示它，所以这不是完成的代码。下面是完成的代码，我认为应该工作。输出仍然在顶部显示块代码，但没有可折叠的元素。

{% extends 'base.html' %} {% block content %} {% for recipe in recipes %} {{recipe.recipe_name}} {{recipe.course_name}} 
{{recipe.course_description}} {{recipe.cooking_time}} {{recipe.preparation_time}} {{recipe.course_ingredients}} {% endfor %}


<ul class="collapsible popout">
    {% for recipe in recipes %}
    <li>
        <div class="collapsible-header"><i class="material-icons">filter_drama</i>{{recipe.recipe_name}} - {{recipe.course_name}}
        </div>
        <div class="collapsible-body">
            <span>{{recipe.course_description}}</span>
        </div>
    </li>
    {% endfor %}


</ul>

{% endblock %}

我看不到我的代码不正确的地方，也没有呈现实现元素。如果需要进一步的信息，请告诉我。

脚本

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>