您已经快完成了 - Materialise 库有一个 JavaScript 组件，可以启用某些功能。在可折叠组件的文档中有这样的内容：
初始化
可折叠元素仅在动态添加时才需要初始化。您还可以在初始化中传入选项，但这也可以在 HTML 标记中完成。
$(document).ready(function(){
$('.collapsible').collapsible({
accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});
});
这些说明对于静态页面很有用，但对于像您这样的单页面应用程序没有帮助。你不能使用$(document).ready因为当该事件触发时，您的组件不在页面上。
要使组件正常工作，您可以做的最简单的事情是为视图模型提供对可折叠元素的引用，然后调用$(element).collapsible()在上面。下面是如何做到这一点...
首先，添加ref归因于ul:
<template>
<ul ref="myElement" class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Second</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
<div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
</li>
</ul>
</template>
接下来，当元素附加到 DOM 时初始化可折叠元素：
export class App {
constructor() {
this.message = 'test app';
}
attached() {
$(this.myElement).collapsible();
}
}
最后，通过将以下行添加到您的 app.js 中，确保加载 MaterializeCSS jquery 组件：
import materialize from 'dogfalo/materialize';
如果您正在处理大量视图或元素，所有这些可能会变得乏味，因此您需要将这个逻辑包装在 aurelia 中自定义属性 http://aurelia.io/docs.html#custom-attributes让事情变得更方便：
import {inject} from 'aurelia-framework';
@inject(Element)
export class CollapsibleCustomAttribute {
constructor(element) {
this.element = element;
}
attached() {
${this.element).collapsible();
}
}
现在您只需添加collapsible属性到您的元素，它将自动初始化 MaterializeCSS 的行为。
