切换Aurelia中最近元素的显示

Question

我可以轻松地使用vanilla JS或jQuery来做这件事但是想知道＆＃34;是什么＆＃34;简单地实现以下目标的方法是在Aurelia。

我有很多＆＃34;卡＆＃34;使用切换按钮显示卡片＆＃34; hidden-info＆＃34;。按照我目前的方式，点击任意＆＃34;展开 - 切换＆＃34;显示所有卡片＆＃34; hidden-info＆＃34;。

用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的新手。谢谢！

Answer 1

我会尝试

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