Bootstrap嵌套手风琴字体 - 令人敬畏的图标

Question

我有一个3级嵌套式bootstrap手风琴,工作正常,但我想在面板标题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>

但是这段代码也改变了尚未打开的嵌套手风琴的图标.是否有任何更好的方法来解决这个问题将不胜感激.

Answer 1

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

而且我已经添加字体真棒图标为内容的  :after伪元素.

Bootstrap 4

基于Accordion示例.

请检查结果: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>

Bootstrap 3

基于Accordion示例.

请检查结果: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>