Toggle Display von nur nächsten Element in Aurelia

Question

Ich könnte dies leicht mit Vanille JS oder jQuery tun, aber wundern, was die "korrekte" Art und Weise, um einfach das Folgende zu erreichen ist in Aurelia.

Ich habe eine Tonne "Karten" mit Umschaltknöpfen, um diese Karten "versteckte-info" zu zeigen. Auf die Art und Weise, wie ich es gerade mache, zeigt ein Klick auf "expand-toggle" alle Karten "hidden-info" an.

Was ist der richtige Weg, um nur das nächste Geschwister mit Aurelia umzuschalten?

Hier ist mein 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> 

Und mein example.js:

export class Example { 
    constructor() { 
     this.cardExpanded = false; 
    } 

    expandCard() { 
     this.cardExpanded = true; 
    } 
} 

Auch, wie würde ich es dann auf dem nächsten Klick verstecken. Das ist einfach, aber ich bin neu in Aurelia. Vielen Dank!

<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:

Answer 1

würde ich

example.html versuchen

export class Example { 
    constructor() { 
     this.cardExpanded = false; 
    } 

    expandCard(sender) { 
     sender.cardExpanded = !sender.cardExpanded; 
    } 
}