Python 将Jinja与Materialize'一起使用；s可折叠元素不'；t显示

我正在使用Python和jinja、PyMongo创建一个简单的配方数据库站点。我已经将它与我的MongoDB连接起来，Jinja块内容可以很好地显示来自该DB的信息。我想使用一个物化可折叠元素，当我自己实现它时，它也可以很好地工作。当我尝试将两者结合起来并在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 %}

{%extends'base.html%}{%block content%}{%forrecipes%}{{recipe.recipe{u name}{{recipe.course{u name}}{{{recipe.course{u description}{{recipe.cooking{time}{{recipe.preparation{time}}{{recipe.course{index.course{u配料}}{endfore%}


先过滤
Lorem ipsum dolor sit amet。


次席
Lorem ipsum dolor sit amet。


第三名是什么
Lorem ipsum dolor sit amet。


{%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%}{%forrecipes%}{{recipe.recipe{u name}{{recipe.course{u name}}{{{recipe.course{u description}{{recipe.cooking{time}{{recipe.preparation{time}}{{recipe.course{index.course{u配料}}{endfore%}

{配方%中配方的%s}

先过滤
Lorem ipsum dolor sit amet。


次席
Lorem ipsum dolor sit amet。


第三名是什么
Lorem ipsum dolor sit amet。

{%endfor%}

{%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 %}

{%extends'base.html%}{%block content%}{%forrecipes%}{{recipe.recipe\u name}{{recipe.course\u name}}
{{配方.课程描述}{{配方.烹饪时间}{{配方.准备时间}{{配方.课程{配料}}{%endfor%}

{配方%中配方的%s}

过滤{{recipe.recipe{u name}-{{recipe.course{u name}
{{配方.课程描述}

{%endfor%}

{%endblock%}

我看不出我的代码哪里不正确，并且没有呈现materialize元素。如果需要任何进一步的信息，请告诉我

脚本

<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>