折叠/展开div时如何更改图标？

Question

我的剃须刀组件中有以下内容：

@{
    var id = $"collapseNotes{itemId}";
    var href = $"#{id}";

    <div>
        <i class="fas fa-angle-right"></i>
        <a data-toggle="collapse" href="@(href)" role="link" aria-expanded="false" aria-controls="@(id)">
            More info
        </a>
        <div class="collapse pl-3 pr-3" id="@(id)">
            <p>long text...</p>
        </div>       
    </div>
}

折叠和展开效果很好。

但是，我想更改展开时的图标，然后在折叠时恢复到原始状态。

仅使用

css

就可以轻松实现还是需要

js

？无论哪种方式，最佳实践实施是什么？

Answer 1

<div>
    <i class="fas @(expanded ? "fa-angle-down" : "fa-angle-right")"></i>
    <a data-toggle="collapse" href="@(href)" role="link" aria-expanded="false" aria-controls="@(id)" @onclick="Toggle">
        More info
    </a>
    <div class="collapse pl-3 pr-3" id="@(id)">
        <p>long text...</p>
    </div>       
</div>

@code{
    bool expanded = false;
    public void Toggle()
    {
        expanded = !expanded;
    }
}