引导嵌套手风琴字体真棒图标

Question

我有一个三级嵌套的Bootstrap手风琴，它运行良好，但是我想在panel-heading div中进行更改，在手风琴打开时使用字体awesome图标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>

但是这段代码也会改变尚未打开的嵌套手风琴的图标。如果有更好的解决方法，将不胜感激。

- Janshair Khan

---

你能同时发布你的HTML代码吗？ - ashfaq.p

Answer 1

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

我还将Font Awesome图标添加为 ::after伪元素的内容。

---

Bootstrap 4

基于手风琴示例。

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

基于手风琴示例。

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

- Gleb Kemarsky

---

谢谢，这很有帮助。但是我在使用Glyph-icons时有些犹豫，因为它们在Bootstrap 4中已经不再支持了。 - Janshair Khan

@JanshairKhan 不太确定我是否理解正确。您需要在Glyph-icons上更改FontAwesome图标吗？ - Gleb Kemarsky

不，正如您建议使用Glyph-Icons而非FontAwesome一样，我认为在将来迁移到Bootstrap 4时会有些麻烦，因为Bootstrap 4仅支持FontAwesome。 - Janshair Khan

@JanshairKhan 我不建议使用Glyphicons。我的代码使用Font Awesome。看看我的CSS。我已将图标添加为:after伪元素的内容。 - Gleb Kemarsky

当使用Bootstrap 4时，需要将样式从panel-title更改为card-header。 - sksallaj

@sksallaj 感谢您的评论。我也添加了Bootstrap 4的解决方案。 - Gleb Kemarsky

Answer 2

这是一个简单的例子，使用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>

- Learning and sharing

Answer 3

发现一个已存在的 jsFiddle: http://jsfiddle.net/zessx/r6eaw/12/，并通过复制粘贴创建了一个带有嵌套手风琴效果的 jsFiddle: http://jsfiddle.net/R6EAW/3979/

你的代码存在一个问题，就是你将 div 标签嵌套在锚点标签（<a/>）中，这是不允许的。

- E. Mourits

---

感谢您的支持，但是您的代码没有起作用。 :( - Janshair Khan

你能在 JSFiddle 上创建一下这个问题吗？ - E. Mourits