Bootstrap 4 使用 Font Awesome 图标折叠显示状态

Question

我单Bootstrap4崩溃如下...

<a data-toggle="collapse" href="#collapseNEWS" aria-expanded="true" aria-controls="collapseNEWS"><i class="fa fa-chevron-circle-up" aria-hidden="true"></i></a>
<div class="row collapse in" id="collapseNEWS">Content</div>

除非单击字体真棒图标，否则这会自动显示内容。我在初始加载时显示 fa-chevron-circle-up 图标。

单击该图标后，内容将关闭，我想改为显示 fa-chevron-circle-down 图标。我将如何实现这一点？

我查看了 alpha 文档： http://v4-alpha.getbootstrap.com/components/collapse/

...但我不清楚如何建立状态以显示...

<i class="indicator fa fa-chevron-circle-up" aria-hidden="true"></i>

或...

<i class="indicator fa fa-chevron-circle-down" aria-hidden="true"></i>

谢谢新泽西

Answer 1

您可以使用自定义 CSS 添加超赞字体图标（内容属性）：

只需使用<i class="fa"></i>和

[data-toggle="collapse"] .fa:before {   
  content: "\f139";
}

[data-toggle="collapse"].collapsed .fa:before {
  content: "\f13a";
}

codepen

中的示例

Answer 2

进一步扩展 - 现在使用 Bootstrap 4 Beta，如果它有所不同：

这在初始状态折叠时不起作用 - 图标将反转。通过一个循环单击按钮将修复它 - 但它会很好地开始。秘诀：加

class="collapsed"

切换到 link(s)。带有可点击文本标题和图标的示例：

<div class="card-header d-flex justify-content-between" id="headingCollapse1">
    <div>
        <a class="collapsed" data-toggle="collapse" href="#collapse1" aria-expanded="false" aria-controls="collapse1">
            Card Header
        </a>
    </div>
    <div>
        <a data-toggle="collapse" class="collapsed btn btn-default btn-xs text-right" href="#collapse1" aria-label="Expand/Collapse Card 1" aria-expanded="false" role="button">
            <i class="fa" aria-hidden="true"></i>
            <span class="sr-only">Expand/Collapse Card 1</span>
        </a>
    </div>
</div>
<div id="collapse1" class="collapse" aria-labelledby="headingCollapse1">
    <div class="card-body">
        Here is some wonderful content that you can't see...until expanded!
    </div>
</div>

我还发现 plus/minus 符号更直观 - 带有箭头，我不太确定它是指 "current status is opened/closed" 还是 "press this to open/close"。基于树视图等，我习惯于“+”表示"closed/click to open"，“-”表示"open/click to close"。因此，虽然不是问题的直接部分，但我会把它留给其他人查找（格式完全归功于上面的@tmg - 我只是插入了 "correct" 个字符）：

[data-toggle="collapse"] i:before{
    content: "\f146";
}

[data-toggle="collapse"].collapsed i:before{
    content: "\f0fe";
}

Answer 3

您可以将 toggleClass() 添加到 <a></a> 元素的 onclick 事件，并为 Font Awesome icon 的元素添加 class fa-rotate-180。

fa-rotate-180 - standard class from Font Awesome.

<a href='' onclick="$('#collapsed-chevron').toggleClass('fa-rotate-180')">
   <i class="fa fa-chevron-circle-up" id="collapsed-chevron"></i>
   Link Text
</a>

Answer 4

对于 SASS 版本的 FontAwesome 5，使用 fa-content() mixin

HTML:

<i class="fas"></i>

SASS:

[data-toggle="collapse"] i.#{$fa-css-prefix}s:before {
  content: fa-content($fa-var-chevron-circle-down);
}

[data-toggle="collapse"].collapsed i.#{$fa-css-prefix}s:before {
  content: fa-content($fa-var-chevron-circle-right);
}

我更喜欢在圆形背景中使用人字形

Answer 5

使用 Rails 和 Bootstrap 4 与 Fontawesome 5.5

这对我来说不太管用，它在重新关闭时将其翻转。我不得不添加另一个状态控件：

[data-toggle="collapse"] .fas:before {  
  content: "\f055";
}

[aria-expanded="true"] .fas:before {  
  content: "\f056";
}

[data-toggle="collapse"].collapsed .fas:before {
  content: "\f055";
}

Answer 6

没有FontAwesome unicode且没有JavaScript的解决方案：

在您目前只有一个图标的地方包括两个图标
使用CSS在内容展开时隐藏up-arrow元素，在内容折叠时隐藏down-arrow

示例：

HTML:

<a data-toggle="collapse" href="#collapseNEWS" aria-expanded="true" aria-controls="collapseNEWS">
    <i class="fa fa-chevron-circle-up"></i>
    <i class="fa fa-chevron-circle-down"></i>
</a>

CSS:

[aria-expanded="true"] .fa-chevron-circle-up, 
[aria-expanded="false"] .fa-chevron-circle-down {
    display:none;
}

Answer 7

html代码

<a class="list-group-item" aria-current="true" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"><i class="fas fa-caret-right"></i></a>

css代码

[aria-expanded="true"] .fa-caret-right{ transform: rotate(90deg); }

Bootstrap 4 使用 Font Awesome 图标折叠显示状态

Bootstrap 4 Collapse show state with Font Awesome icon

icons

bootstrap-4