卡片标题 - 图标上的链接停止折叠答案

【问题标题】：Card Header - link on icon stop collapse卡片标题 - 图标上的链接停止折叠
【发布时间】：2019-11-19 00:49:05
【问题描述】：

我有一个卡片标题，当我点击时，我需要在其中有一个带有操作的图标。问题是当我点击它时，它会折叠我不想做的卡。我能做些什么来防止仅在此图标上崩溃吗？

根据客户的要求，图标必须位于标题旁边，并且他们绝对希望完整的标题能够在单击时折叠。

我想我会删除 bootstrap data-toggle="collapse" 并使用 .card-header:not(xxx) 构建我自己的折叠，以防止我的链接在 javascript 中停止。

<h5 class="card-header">
     <a data-toggle="collapse" href="#infoGeneral" aria-expanded="true" aria-controls="infoGeneral" id="heading-info-general" class="d-block">
                    Information générale de la station <i class="far fa-comment"></i>
                    <i class="fas fa-angle-up float-right"></i>
                </a>
            </h5>

image

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

您只需要将其从折叠元素中取出即可。

<h5 class="card-header">
    <p class="d-block">Information générale de la station <i class="far fa-comment"></i></p>
    <a data-toggle="collapse" href="#infoGeneral" aria-expanded="true" aria-controls="infoGeneral" id="heading-info-general" class="d-block">
        <i class="fas fa-angle-up float-right"></i>
    </a>
</h5>

【讨论】：

执行您刚才放置的操作将删除整个标题的折叠。我只需要图标不会折叠。我刚刚添加了一张图片。绿色部分仍然需要执行折叠。