Bootstrap 嵌套手风琴字体 - 真棒图标答案

【问题标题】：Bootstrap nested accordion font-awesome iconsBootstrap 嵌套手风琴字体 - 真棒图标
【发布时间】：2018-02-16 21:35:55
【问题描述】：

我有一个 3 级嵌套引导手风琴，它工作正常，但我想在 panel-heading div 中进行更改，我可以在手风琴时使用字体真棒图标 fa fa-chevron-down折叠时打开（不影响嵌套的手风琴）和fa fa-chevron-right。我正在使用此代码来更改图标：

$('div.panel-collapse.collapse').on('shown.bs.collapse', function() {
  $(this).parent().find(".fa-chevron-right").removeClass("fa-chevron-right").addClass("fa-chevron-down");
  $(this).parent().find('.panel-heading').css('background', '#0271BC');
}).on('hidden.bs.collapse', function() {
  $(this).parent().find(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-right");
  $(this).parent().find('.panel-heading').css('background', '#02A4EF');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">

<a href="#aspnetcore" class="accordion-toggle tutorial-panel-heading" data-toggle="collapse" data-parent="#accordion">
  <div class="panel panel-default">
    <div class="panel-heading outer web">
      <h4 class="panel-title fonter font-light-text">
        <i class="fa fa-chevron-down pull-right"></i> Getting Starting with ASP.NET Core 1.0
      </h4>
    </div>
    <div id="aspnetcore" class="panel-collapse collapse outer-arrow">
      <div class="panel-body">
        <div class="panel-group" id="webdevelopment">
          <a href="#frontend" class="accordion-toggle tutorial-panel-heading" data-toggle="collapse" data-parent="#webdevelopment">
            <div class="panel panel-default">
              <div class="panel-heading middle-link-web">
                <h4 class="panel-title font-light-text">
                  <i class="fa fa-chevron-down pull-right"></i> Front-End
                </h4>
              </div>
              <div id="frontend" class="panel-collpase collapse outer-arrow">
                <div class="panel-body">
                  <div class="panel-group" id="webdevelopment">
                    <a asp-controller="Web" asp-action="Grunt" class="accordion-toggle lab-link">
                      <div class="panel panel-default">
                        <div class="panel-heading middle-link">
                          <h4 class="panel-title font-light-text">
                            Grunt Task Runner
                          </h4>
                        </div>
                      </div>
                    </a>
                    <a href="#angular" class="accordion-toggle tutorial-panel-heading inner-link" data-toggle="collapse" data-parent="#frontend">
                      <div class="panel panel-default">
                        <div class="panel-heading middle-link-web">
                          <h4 class="panel-title font-light-text">
                            <i class="fa fa-chevron-down pull-right"></i> Angular
                            2
                          </h4>
                        </div>
                        <div id="angular" class="panel-collpase collapse">
                          <div class="panel-body">
                            <a asp-controller="Web" asp-action="Angular" class="accordion-toggle lab-link">
                              <div class="panel panel-default">
                                <div class="panel-heading middle-link">
                                  <h4 class="panel-title font-light-text">
                                    Introduction to Angular 2
                                  </h4>
                                </div>
                              </div>
                            </a>
                          </div>
                        </div>
                      </div>
                    </a>

                    <a class="accordion-toggle lab-link">
                      <div class="panel panel-default">
                        <div class="panel-heading middle-link">
                          <h4 class="panel-title font-light-text">
                            LESS and SASS <i class="fa fa-cog fa-spin fa-fw"></i>
                          </h4>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </a>
          <a href="#backend" class="accordion-toggle tutorial-panel-heading" data-toggle="collapse" data-parent="#webdevelopment">
            <div class="panel panel-default">
              <div class="panel-heading middle-link-web">
                <h4 class="panel-title font-light-text">
                  <i class="fa fa-chevron-down pull-right"></i> Back-End
                </h4>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</a>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

但是这段代码也改变了尚未打开的嵌套手风琴的图标。有没有更好的方法来解决这个问题。

【问题讨论】：

你能把html代码也发给你吗？

标签： jquery html css twitter-bootstrap accordion

【解决方案1】：

我更喜欢使用 Bootstrap 文档中的示例并通过 CSS 切换图标。

我添加了 Font Awesome 图标作为 the :after pseudo-element 的内容。

引导程序 4

基于Accordion example。

请查看结果：CodePen

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

.mb-0 > a {
  display: block;
  position: relative;
}
.mb-0 > a:after {
  content: "\f078"; /* fa-chevron-down */
  font-family: 'FontAwesome';
  position: absolute;
  right: 0;
}
.mb-0 > a[aria-expanded="true"]:after {
  content: "\f077"; /* fa-chevron-up */
}

<div id="accordion">
  <div class="card">
    <div class="card-header" id="heading-1">
      <h5 class="mb-0">
        <a role="button" data-toggle="collapse" href="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
          Item 1
        </a>
      </h5>
    </div>
    <div id="collapse-1" class="collapse show" data-parent="#accordion" aria-labelledby="heading-1">
      <div class="card-body">

        <div id="accordion-1">
          <div class="card">
            <div class="card-header" id="heading-1-1">
              <h5 class="mb-0">
                <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-1" aria-expanded="false" aria-controls="collapse-1-1">
                  Item 1 > 1
                </a>
              </h5>
            </div>
            <div id="collapse-1-1" class="collapse" data-parent="#accordion-1" aria-labelledby="heading-1-1">
              <div class="card-body">

                  <div id="accordion-1-1">
                    <div class="card">
                      <div class="card-header" id="heading-1-1-1">
                        <h5 class="mb-0">
                          <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-1-1" aria-expanded="false" aria-controls="collapse-1-1-1">
                            Item 1 > 1 > 1
                          </a>
                        </h5>
                      </div>
                      <div id="collapse-1-1-1" class="collapse" data-parent="#accordion-1-1" aria-labelledby="heading-1-1-1">
                        <div class="card-body">
                          Text 1 > 1 > 1
                        </div>
                      </div>
                    </div>
                    <div class="card">
                      <div class="card-header" id="heading-1-1-2">
                        <h5 class="mb-0">
                          <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-1-2" aria-expanded="false" aria-controls="collapse-1-1-2">
                            Item 1 > 1 > 2
                          </a>
                        </h5>
                      </div>
                      <div id="collapse-1-1-2" class="collapse" data-parent="#accordion-1-1" aria-labelledby="heading-1-1-2">
                        <div class="card-body">
                          Text 1 > 1 > 2
                        </div>
                      </div>
                    </div>
                    <div class="card">
                      <div class="card-header" id="heading-1-1-3">
                        <h5 class="mb-0">
                          <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-1-3" aria-expanded="false" aria-controls="collapse-1-1-3">
                            Item 1 > 1 > 3
                          </a>
                        </h5>
                      </div>
                      <div id="collapse-1-1-3" class="collapse" data-parent="#accordion-1-1" aria-labelledby="heading-1-1-3">
                        <div class="card-body">
                          Text 1 > 1 > 3
                        </div>
                      </div>
                    </div>
                  </div>

              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="heading-1-2">
              <h5 class="mb-0">
                <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-1-2" aria-expanded="false" aria-controls="collapse-1-2">
                  Item 1 > 2
                </a>
              </h5>
            </div>
            <div id="collapse-1-2" class="collapse" data-parent="#accordion-1" aria-labelledby="heading-1-2">
              <div class="card-body">
                Text 1 > 2
              </div>
            </div>
          </div>
        </div>      
      
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading-2">
      <h5 class="mb-0">
        <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
          Item 2
        </a>
      </h5>
    </div>
    <div id="collapse-2" class="collapse" data-parent="#accordion" aria-labelledby="heading-2">
      <div class="card-body">
        Text 2
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="heading-3">
      <h5 class="mb-0">
        <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
          Item 3
        </a>
      </h5>
    </div>
    <div id="collapse-3" class="collapse" data-parent="#accordion" aria-labelledby="heading-3">
      <div class="card-body">
        Text 3
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

引导程序 3

基于Accordion example。

请查看结果：CodePen • JSFiddle

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

.panel-title > a {
  display: block;
  position: relative;
}
.panel-title > a:after {
  content: "\f078"; /* fa-chevron-down */
  font-family: 'FontAwesome';
  position: absolute;
  right: 0;
}
.panel-title > a[aria-expanded="true"]:after {
  content: "\f077"; /* fa-chevron-up */
}

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading-1">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
          Item 1
        </a>
      </h4>
    </div>
    <div id="collapse-1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-1">
      <div class="panel-body">

        <div class="panel-group" id="accordion-1" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="heading-1-1">
              <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion-1" href="#collapse-1-1" aria-expanded="false" aria-controls="collapse-1-1">
                  Item 1 > 1
                </a>
              </h4>
            </div>
            <div id="collapse-1-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-1">
              <div class="panel-body">

                  <div class="panel-group" id="accordion-1-1" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                      <div class="panel-heading" role="tab" id="heading-1-1-1">
                        <h4 class="panel-title">
                          <a role="button" data-toggle="collapse" data-parent="#accordion-1-1" href="#collapse-1-1-1" aria-expanded="false" aria-controls="collapse-1-1-1">
                            Item 1 > 1 > 1
                          </a>
                        </h4>
                      </div>
                      <div id="collapse-1-1-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-1-1">
                        <div class="panel-body">
                          Text 1 > 1 > 1
                        </div>
                      </div>
                    </div>
                    <div class="panel panel-default">
                      <div class="panel-heading" role="tab" id="heading-1-1-2">
                        <h4 class="panel-title">
                          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-1-1" href="#collapse-1-1-2" aria-expanded="false" aria-controls="collapse-1-1-2">
                            Item 1 > 1 > 2
                          </a>
                        </h4>
                      </div>
                      <div id="collapse-1-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-1-2">
                        <div class="panel-body">
                          Text 1 > 1 > 2
                        </div>
                      </div>
                    </div>
                    <div class="panel panel-default">
                      <div class="panel-heading" role="tab" id="heading-1-1-3">
                        <h4 class="panel-title">
                          <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-1-1" href="#collapse-1-1-3" aria-expanded="false" aria-controls="collapse-1-1-3">
                            Item 1 > 1 > 3
                          </a>
                        </h4>
                      </div>
                      <div id="collapse-1-1-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-1-3">
                        <div class="panel-body">
                          Text 1 > 1 > 3
                        </div>
                      </div>
                    </div>
                  </div>

              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="heading-1-2">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-1" href="#collapse-1-2" aria-expanded="false" aria-controls="collapse-1-2">
                  Item 1 > 2
                </a>
              </h4>
            </div>
            <div id="collapse-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1-2">
              <div class="panel-body">
                Text 1 > 2
              </div>
            </div>
          </div>
        </div>      
      
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading-2">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
          Item 2
        </a>
      </h4>
    </div>
    <div id="collapse-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-2">
      <div class="panel-body">
        Text 2
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading-3">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
          Item 3
        </a>
      </h4>
    </div>
    <div id="collapse-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-3">
      <div class="panel-body">
        Text 3
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

【讨论】：

感谢它的帮助。但是我在使用 Glyph-icons 时有点犹豫，因为它们不再在 Bootstrap 4 中了。
@JanshairKhan 不确定我理解正确。您需要更改字形图标上的 FontAwesome 图标吗？
不，因为您建议使用 Glyph-Icons 而不是 FontAwesome，我认为当我将来迁移到 Bootstrap 4 时这会有点麻烦，因为 Bootstrap 4 只支持 FontAwesome。跨度>
@JanshairKhan 我不建议使用 Glyphicons。我的代码使用 Font Awesome。看看我的 CSS。我已将图标添加为the :after pseudo-element 的内容。
在使用 bootstrap 4 时，需要将样式从 panel-title 更改为 card-header

【解决方案2】：

找到一个现有的 jsFiddle：http://jsfiddle.net/zessx/r6eaw/12/ 还有一点复制粘贴，一个带有嵌套手风琴的：http://jsfiddle.net/R6EAW/3979/

您的代码的一个问题是您将 div 嵌套在锚 (<a/>) 标记中。这是不允许的。

【讨论】：

感谢您的支持，但您的代码无法正常工作。 :(
你能在 jsfiddle 中创建问题吗？

【解决方案3】：

这是一个简单的例子，通过这个，最初使用 Jquery 和 Bootstrap 正确显示图标。

¡希望对你很有帮助！

$(function(){
 $('.panel-title a[data-toggle="collapse"]').on('click', this, function(event) {
  
  $('.panel-collapse').on('show.bs.collapse', function () {
   $(this).siblings('.panel-heading').find('i').removeClass('fa-plus-circle').addClass('fa-minus-circle');
  });

  $('.panel-collapse').on('hide.bs.collapse', function () {
   $(this).siblings('.panel-heading').find('i').removeClass('fa-minus-circle').addClass('fa-plus-circle');
  });

 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">


<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

<!-- Panel -->
<div class="panel panel-default">
  <div class="panel-heading" role="tab" id="item001">
    <h4 class="panel-title">
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#detail001" aria-expanded="true" aria-controls="detail001">
      <div class="title">Title 1 <i class="fa fa-minus-circle" aria-hidden="true"></i></div>
    </a>
    </h4>
  </div>
  <div id="detail001" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="item001">
    <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>
<!--/ Panel -->

<!-- Panel -->
<div class="panel panel-default">
  <div class="panel-heading" role="tab" id="item002">
    <h4 class="panel-title">
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#detail002" aria-expanded="true" aria-controls="detail002">
      <div class="title">Title 2 <i class="fa fa-plus-circle" aria-hidden="true"></i></div>
    </a>
    </h4>
  </div>
  <div id="detail002" class="panel-collapse collapse" role="tabpanel" aria-labelledby="item002">
    <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>
<!--/ Panel -->

</div>

【讨论】：