Javascript 为什么我的材质设计可折叠列表可扩展动画不起作用？

我在我的网站上使用材料设计，我有一个可折叠列表组成的评论部分。我希望用户能够通过将可折叠模式设置为“可展开”来打开多个注释。它符合我的要求，但打开新注释的滑动动画不起作用。它只显示注释，不显示任何动画。但如果你想关闭它（点击它），它会再次完美地向上滑动

所以它向上滑动（关闭时），而不是向下滑动（打开时）

示例：页面底部的可展开列表

正如你所看到的，我有一个可折叠的列表，它是可扩展的。（我正在使用Razor动态设置内容）

视图：

---

我真的很感谢你的帮助。这是我的考试任务，所以它有点重要：）

手册/示例非常清楚。第一：你的js什么时候运行？它在一个文档准备活动中？如果您查看示例，li的内容分为标题和正文。您的示例忽略了这一点。

您是否确保有正确的cdn脚本链接？如果我理解正确，javascript链接正确。这是一个非常复杂的项目，我们经常使用js，所有功能都正常工作。除了这篇有可扩展列表的文章。是的，js init正在文档中运行，li已经准备好了内容，我只是没有显示它，但是我现在已经更新了它，这样你可以更好地了解情况。事实上，我在没有javascript初始化的情况下尝试了它，它的行为也一样。还有什么建议吗？

<ul class="collapsible" data-collapsible="expandable">
    @foreach (var item in Model)
    {
        <li>
            <div class="collapsible-header">
                //Comment preview and date here...
            </div>
            <div class="collapsible-body">
                //Display comment text etc here...
            </div>
            
        </li>
    }
</ul>

$('.collapsible').collapsible({
    accordion: false 
});