使用 Jquery 更改 Bootstrap Collapse 上的图标

Question

我有这个手风琴：

<div id="accordion">
 <div class="card">
   <h5 class="mb-0">
    <i class="fas fa-chevron-down"></i> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style="color: black;">Here's the question </button></h5>
 <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
  <div class="card-body">
    Here's the collapse answer!
 </div>
   </div>
    </div>
</div>

我是 Jquery 的菜鸟，所以我的 jquery 代码将如何实现以下目标：当它折叠时，我想将 fas fa-chevron-down 更改为 fas fa-chevron-up。

谢谢！

Answer 1

为此，您可以使用 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 */
}

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/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="false" aria-controls="collapse-1">
          Item 1
        </a>
      </h4>
    </div>
    <div id="collapse-1" class="panel-collapse collapse" 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.6/js/bootstrap.min.js"></script>

Answer 2

我认为您正在寻找类似的解决方案。

 $('.panel-collapse').on('show.bs.collapse', function () {
    $(this).siblings('.panel-       heading').addClass('active');
  });

  $('.panel-collapse').on('hide.bs.collapse', function () {
    $(this).siblings('.panel-heading').removeClass('active');
  });

body{
  padding:50px;
  background:#fff;
}
.wrapper{
  width:70%;
}
@media(max-width:992px){
 .wrapper{
  width:100%;
} 
}
.panel-heading {
  padding: 0;
	border:0;
}
.panel-title>a, .panel-title>a:active{
	display:block;
	padding:15px;
  color:#555;
  font-size:16px;
  font-weight:bold;
	text-transform:uppercase;
	letter-spacing:1px;
  word-spacing:3px;
	text-decoration:none;
}
.panel-heading  a:before {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   transition: all 0.5s;
}
.panel-heading.active a:before {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
} 

<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div class = "container">

  
  <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" 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" 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>
  
  
</div> <!-- end container -->

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Answer 3

JS

let wrapper = $('#accordion');
$('.btn-link').on('click', function () {
let status = $(this).attr('aria-expanded'); // code is useless here. Just to check if collapse open or close
  wrapper.find('.fa-chevron-down').removeClass('fa-chevron-down').addClass('fa-chevron-up');
});

HTML

<div id="accordion">
 <div class="card">
   <h5 class="mb-0">
    <i class="fas fa-chevron-down"></i> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" style="color: black;">Here's the question </button></h5>
 <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
  <div class="card-body">
    Here's the collapse answer!
 </div>
   </div>
    </div>
</div>

Answer 4

您可以将 fa 类从“fa-chevron-down”转换为“fa-chevron-up”

<a href="javascript:void(0);" onclick="$('.sort-chevron').toggleClass('fa-chevron-down fa-chevron-up');">Sort By <i class="fa fa-chevron-down sort-chevron"></i> </a>