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

Posted 2023-02-22

【中文标题】带有折叠状态图标的 Bootstrap 4 可折叠卡片

【英文标题】：Bootstrap 4 collapsable card with collapsed status icon

【发布时间】：2021-10-16 09:03:36

【问题描述】：

我已经设法在引导程序 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>

【参考方案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'));
        
    );
);

【讨论】：

感谢您的回复。我的页面上有多个可折叠卡片。 jquery 代码是否适用于所有这些，或者我是否需要为每张卡复制/粘贴此代码并为该特定卡更改其中的一些值？还有图标是从哪里来的？如果我需要在页面中添加一些资源（css 文件/js 文件），您可以提一下吗？

它适用于所有卡片，而 icons 只是一个没有 CSS 的类，只需复制粘贴并自己查看即可。我不知道你用的是什么图标库，我把 Fontawesome 作为默认。