带有折叠状态图标的 Bootstrap 4 可折叠卡片

Question

我已经设法在引导程序 4 中创建了一张可折叠卡片，但我想在卡片标题的右上角显示一个图标（折叠时箭头指向上方，未折叠时箭头指向下方）以指示折叠状态。折叠卡的代码如下

<div class="card-header" data-toggle="collapse" data-target="#demo1">
    this is the card header
</div>
<div id="demo1" class="card-body collapse">
    this is the card body
</div>

Answer 1

您需要为此使用 jquery：

HTML：

<div class="card-header" data-toggle="collapse" data-target="#demo1">
    this is the card header
  <span class="icons float-right fa fa-arrow-alt-circle-up"></span>
</div>
<div id="demo1" class="card-body collapse">
    this is the card body
</div>

jquery：

$(document).ready(function(){
    $('.card-header').on("click", function(){
        var id = $(this).attr('data-target');
        if($(id).hasClass('show')){
            $(this).find('.icons').removeClass('fa-arrow-alt-circle-down').addClass('fa-arrow-alt-circle-up');
            console.log($(this).find('.icons').attr('class'));
        }else{
            $(this).find('.icons').removeClass('fa-arrow-alt-circle-up').addClass('fa-arrow-alt-circle-down');
            console.log($(this).find('.icons').attr('class'));
        }
    });
});