Bootstrap 3 用雪佛龙图标折叠显示状态

Posted 2023-03-06

技术标签:

【中文标题】Bootstrap 3 用雪佛龙图标折叠显示状态【英文标题】：Bootstrap 3 Collapse show state with Chevron icon 【发布时间】：2013-08-21 22:58:01 【问题描述】：

使用来自 Bootstrap 3 javascript examples page for Collapse 的核心示例，我已经能够使用 V 形图标显示崩溃状态。

我有这个工作使用：

$('#accordion .accordion-toggle').click(function (e) 
    var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
    $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
);

这可行（未在所有浏览器中完全测试），但我想知道是否有更优雅的解决方案？

理想情况下，我想使用核心功能，但我不确定如何使用它达到相同的效果。

$('#accordion').on('hidden.bs.collapse', function () 
    //do something...
)

这是 jsfiddle 中的工作版本。

【问题讨论】：

嗨，在这个例子中，我如何使整个标题成为超链接而不仅仅是文本。换句话说，当我点击标题面板时，不仅仅是文本，我想显示切换。我该怎么做？类似：***.com/questions/19024218/… 类似于dperish，我做了this 【参考方案1】：

我知道这是旧的，但由于现在是 2018 年，我想我会回复通过简化代码并通过使 V 形基于折叠或不旋转来增强用户体验来改善它。不过，我正在使用 FontAwesome。这是 CSS：

a[data-toggle="collapse"] .rotate 
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
   -ms-transition: all 0.2s ease-out;
   -o-transition: all 0.2s ease-out;
   transition: all 0.2s ease-out;
   -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);

a[data-toggle="collapse"].collapsed .rotate 
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);

这是面板部分的 html：

  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
          <i class="fa fa-chevron-right pull-right rotate"></i>
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>

我使用 bootstraps pull-right 将人字形拉到面板标题的右侧，面板标题应该是全宽和响应式的。 CSS 完成所有动画工作，并根据面板是否折叠来旋转 V 形。很简单。

【讨论】：

如果我可以多次投票，我会的。它是一个很棒的解决方案，带有漂亮的动画和一切。干杯！【参考方案2】：

单线。

i.fa.fa-chevron-right.collapse.in  transform: rotate(180deg);

在此示例中，它用于对可折叠表格行进行分组。您唯一需要做的就是将目标类名称（my-collapse-name）添加到您的图标中：

<tr data-toggle="collapse" data-target=".my-collapse-name">
    <th><i class="fa fa-chevron-right my-collapse-name"></span></th>
    <th>Master Row - Title</th>
</tr>
<tr class="collapse my-collapse-name">
    <td></td>
    <td>Detail Row - Content</td>
</tr>

您可以通过使用 <span class='caret my-collapse-name'></span> 和 span.caret.collapse.in transform: rotate(90deg); 来使用 Bootstrap 的本机插入符号类来完成相同的操作

【讨论】：

【参考方案3】：

对于以下 HTML（来自Bootstrap 3 examples）：

.panel-heading .accordion-toggle:after 
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */

.panel-heading .accordion-toggle.collapsed:after 
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript" ></script>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

视觉效果：

【讨论】：

这很好用......这是一个适合你的 jsFiddle：jsfiddle.net/panchroma/3gYa3 在小提琴中，所有的人字形最初都指向下方。有没有简单的解决方法？我没有看到初始状态的纯 CSS 解决方案；这里的问题是引导程序不会将“折叠”类添加到链接中，直到您折叠至少一个（即使它们都折叠开始）。然后它只是从“打开”链接中删除该类。因此，由于“open”和“default”具有相同的类，因此没有好的纯 CSS 解决方案。理想情况下，这将通过修改引导程序的 javascript 以添加“开放”类来区分来解决。在那之前，忍受它，或者使用其他答案之一的 JS。我知道这是一篇旧帖子，但要回答 Carl 的问题 - 如果您在所有带有“accordion-toggle”的锚标签上添加“collapsed”类，您的问题就会消失...... . 所以有了“accordion-toggle collapse”。然后，JQuery 将在需要时添加和删除类。我修改了这个例子，使整个标题都是可点击的。我确实注意到的一个小错误是每个面板最右侧的文本被“推动”了一点，直到幻灯片打开/关闭动画完成之后。如果有人知道如何解决这个问题，请这样做。这是小提琴：Updated JSFiddle【参考方案4】：

如果您尝试仅将其用于面板（而不是手风琴），请尝试以下代码：

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="collapse-toggle" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Panel heading with title</a>
        </h4>
    </div>
    <div id="collapseExample" class="panel-collapse collapse in">
        <div class="panel-body">
            Panel content
        </div>
    </div>
</div>

【讨论】：

【参考方案5】：

Angular 似乎会导致此处基于 JavaScript 的方法出现问题（至少是我尝试过的方法）。我在这里找到了这个解决方案：http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang。它的要点是在切换按钮上使用data-ng-click，并使用$scope上下文创建更改控制器中按钮的方法。

我想我可以提供更多详细信息... 我的按钮设置为它们折叠的 div 的初始状态的 glyphicon (glyphicon-chevron-right == collapsed div)。

page.html:

<div class="title-1">
    <button data-toggle="collapse" data-target="#panel- p_idx " class="dropdown-toggle title-btn glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)"></button>
</div>
<div id="panel- p_idx " class="collapse sect">
    ...
</div>

controllers.js：

.controller('PageController', function($scope, $rootScope) 
    $scope.collapse = function (event) 
        $(event.target).toggleClass("glyphicon-chevron-down glyphicon-chevron-right");
    ;
)

【讨论】：

【参考方案6】：

为了改进上升最多的答案，你们中的一些人可能已经注意到在页面的初始加载时 V 形标记都指向同一个方向。通过将“折叠”类添加到要加载折叠的元素来纠正此问题。

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

这是一个有效的小提琴：http://jsfiddle.net/3gYa3/585/

【讨论】：

【参考方案7】：

改进 Bludream 的答案：

您绝对可以使用 FontAwesome！

确保包含“collapsed”和“panel-heading”类。在您单击面板之前不包含“折叠”类，因此您希望包含“折叠”类以显示正确的人字形（即，折叠时显示 chevron-right，打开时显示 chevron-down）。

HTML

<div class="panel panel-default">
    <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOrderItems1">Products 1 <i class="chevron fa fa-fw" ></i></div>
    <div class="collapse" id="collapseOrderItems1">
        <p>Lorem ipsum...</p>
    </div>
</div>

CSS

.panel-heading .chevron:after 
    content: "\f078";   

.panel-heading.collapsed .chevron:after 
    content: "\f054";

另外，创建一个新类而不是使用现有类是一个好习惯。

例如见 Codepen：http://codepen.io/anon/pen/PPxOJX

【讨论】：

和 fontawesome 4 : fa-chevron-up 为元素和 .collapsed .fa-chevron-up:before content: "\f077"; 为类【参考方案8】：

这里有几个纯 css 帮助类，可以让您直接在 html 中处理任何类型的切换内容。

它适用于您需要切换的任何元素。无论您的布局是什么，您只需将其放在切换元素中带有 .if-collapsed 和 .if-not-collapsed 类的几个元素中。

唯一需要注意的是，您必须确保设置了所需的切换初始状态。如果它最初是关闭的，则在切换开关上放置一个 collapsed 类。

它还需要 :not 选择器，它不适用于 IE8。

HTML 示例：

<a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseExample">
  <!--You can put any valid html inside these!-->
  <span class="if-collapsed">Open</span>
  <span class="if-not-collapsed">Close</span>
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

低版本：

[data-toggle="collapse"] 
    &.collapsed .if-not-collapsed 
         display: none;
    
    &:not(.collapsed) .if-collapsed 
         display: none;

CSS 版本：

[data-toggle="collapse"].collapsed .if-not-collapsed 
  display: none;

[data-toggle="collapse"]:not(.collapsed) .if-collapsed 
  display: none;

【讨论】：

【参考方案9】：

或者...你可以放一些这样的样式。

.panel-title a.collapsed 
     background: url(../img/arrow_right.png) center right no-repeat;

.panel-title a 
     background: url(../img/arrow_down.png) center right no-repeat;

http://codepen.io/anon/pen/GJjrQN

【讨论】：

【参考方案10】：

我正在使用 字体真棒！并希望面板可折叠

        <div class="panel panel-default">
                <div class="panel-heading" data-toggle="collapse" data-target="#collapseOrderItems"><i class="fa fa-chevron fa-fw" ></i> products</div>

                <div class="collapse in" id="collapseOrderItems">
                            ....
                </div>
        </div>

和css

.panel-heading .fa-chevron:after 
    content: "\f078";   

.panel-heading.collapsed .fa-chevron:after 
    content: "\f054";

【讨论】：

【参考方案11】：

我想要一种纯 html 方法，因为我想折叠和展开通过模板动态添加的 html！我想出了这个...

https://jsfiddle.net/3mguht2y/1/

var noJavascript = ":)";

这可能对某人有用:)

【讨论】：

【参考方案12】：

感谢 biggates 和 steakpi。作为 Dreamonic 问题的答案，我做了一些更改，使所有标题都可点击（不仅是标题字符串和 gluphs），并从链接中删除了下划线。为了强制图标出现在同一行，我在 CSS 指令的末尾添加了 h4。这是修改后的代码：

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">      
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          <h4 class="panel-title">Collapsible Group Item #1</h4>
        </a>      
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">      
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          <h4 class="panel-title">Collapsible Group Item #2</h4>
        </a>      
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">      
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          <h4 class="panel-title">Collapsible Group Item #3</h4>
        </a>      
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

以及修改后的 CSS：

.panel-heading .accordion-toggle h4:after 
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  
    content: "\e114";    
    float: right;        
    color: grey;        
    overflow: no-display;

.panel-heading .accordion-toggle.collapsed h4:after 
    /* symbol for "collapsed" panels */
    content: "\e080";    

a.accordion-toggle
    text-decoration: none;

【讨论】：

工作正常，点击标题时删除细虚线并通过 a.accordion-toggle:focus outline: none !important; 【参考方案13】：

工作简单的例子

显示/隐藏身体状况获取其父 att 获取查找图标更改图标

enter simple

HTML：

<body>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#jai">Jai</a>
        </div>
        <div id="jai" class="accordion-body collapse in">
            <div>
                <div class="accordion-inner">body content 1</div>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">jai2</a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div>
                <div class="accordion-inner">body content 2</div>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse3">jai3</a>
        </div>
        <div id="collapse3" class="accordion-body collapse">
            <div>
                <div class="accordion-inner">body content 3</div>
            </div>
        </div>
    </div>
</body>

JavaScript

$('div.accordion-body').on('shown', function () 
    $(this).parent("div").find(".icon-chevron-down")
           .removeClass("icon-chevron-down").addClass("icon-chevron-up");
);

$('div.accordion-body').on('hidden', function () 
    $(this).parent("div").find(".icon-chevron-up")
           .removeClass("icon-chevron-up").addClass("icon-chevron-down");
);

【讨论】：

【参考方案14】：

你可以使用这种代码：

function toggleChevron(e) 
    $(e.target)
        .prev('.panel-heading')
        .find('i.indicator')
        .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');

$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);

=> 工作JsFiddle

【讨论】：

这是一个更好的方法zessx，干得好伙计。这是自 Bootstrap 3 推出以来我看到的第一个干净的解决方案。你也可以使用$('#accordion').on('hidden.bs.collapse shown.bs.collapse', toggleChevron); 如果您希望箭头在折叠的开头而不是在结尾移动，您可以改用$('#accordion').on('hide.bs.collapse show.bs.collapse', toggleChevron); 这很好用。如何让图标切换更快？ @RachelS Will Parker 的建议让它更快。

以上是关于Bootstrap 3 用雪佛龙图标折叠显示状态的主要内容，如果未能解决你的问题，请参考以下文章

带有下拉图标-chevron 的 Bootstrap Accordion 导航

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

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

将 Font Awesome 5 与 Bootstrap 3 折叠组件一起使用——在折叠时更改箭头图标？

Bootstrap 折叠复杂行为

Bootstrap 在初始状态下折叠菜单箭头