使用Jquery更改Bootstrap折叠上的图标

问题描述 投票：0回答：3

我有这样的手风琴：

<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-up来改变fas-chevron-down。

谢谢！

jquery icons collapse
3个回答
2
投票

为此，您可以使用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>
0
投票

我想你正在寻找类似的解决方案。

 $('.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>
0
投票

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.