切换Aurelia中最近元素的显示

时间:2017-07-01 14:28:37

标签: javascript html toggle aurelia

我可以轻松地使用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的新手。谢谢!

1 个答案:

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