尝试使用 materializecss 构建前端,但无法使可折叠元素正常工作

Trying to build a front end with materializecss but having a trouble getting the collapsible element to work

我正在尝试构建一个前端,我想使用可折叠元素。 问题是它没有做任何事情,我可以点击 header 框但没有任何反应。

根据文档,如果元素是动态添加的,您必须 'initialize' 元素。

所以我在每个破坏和创建 Dom 元素的动作之后都这样做:

function setUpPageElements () {
    $.each($('.collapsible'), function (index,value) { 
        value.collapsible({
          accordion : true
        });
    })
};

这是我的 ERB 模板

<ul class="collapsible" data-collapsible"accordion">
        <% if jobs.first %>
            <% jobs.each do |job| %>
                <%= render partial: 'job', locals: {job: job} %>
            <% end %> 
        <% else %>
        <li >
            <section id="header" class="collapsible-header active" > <p id="name">No active jobs</p></section>
            <section  class="collapsible-body">
                There are currently no active jobs.
                You can create new jobs by creating selecting 'New Job from navigation bar along the top'
            </section>
        </li>
        <% end %>
</ul>

叹息

打开页面的初始请求,我没有调用元素初始化函数,以为我是;结果我把函数调用放在了错误的地方愚蠢的手掌所以它没有被调用。