我可以轻松地使用vanilla JS或jQuery来做这件事但是想知道"是什么"简单地实现以下目标的方法是在Aurelia。
我有很多"卡"使用切换按钮显示卡片" hidden-info"。按照我目前的方式,点击任意"展开 - 切换"显示所有卡片" hidden-info"。
用Aurelia切换最近的兄弟姐妹的正确方法是什么?
这是我的example.html
:
<div class="inner">
<i class="expand-toggle" click.delegate="expandCard()"></i>
<h3>Title</h3>
<div if.bind="cardExpanded" class="au-animate hidden-info">
</div>
</div>
我的example.js
:
export class Example {
constructor() {
this.cardExpanded = false;
}
expandCard() {
this.cardExpanded = true;
}
}
另外,我将如何在下次点击时隐藏它。这是基本的,但我是Aurelia的新手。谢谢!
答案 0 :(得分:0)
我会尝试
example.html的:
<div class="inner">
<i class="expand-toggle" click.delegate="expandCard(this)"></i>
<h3>Title</h3>
<div if.bind="cardExpanded" class="au-animate hidden-info">
</div>
</div>
example.js:
export class Example {
constructor() {
this.cardExpanded = false;
}
expandCard(sender) {
sender.cardExpanded = !sender.cardExpanded;
}
}