jQuery：旋转加上减去字体真棒图标，在手风琴部分点击

Question

I am trying to learn how to rotate/ spin a plus sign icon into a minus sign on click.

I saw the effect on the vAccordion by Lukasz Watroba .

Right now I am only capable to have the code toggle the plus icon to a minus icon, but without the spin/ convert effect:

Mark-up:

<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 <i class="fa fa-plus"></i> 
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">
        Collapsible Content #1
      </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 <i class="fa fa-plus"></i>
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Collapsible Content #2
      </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 <i class="fa fa-plus"></i> 
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Collapsible Content #3
      </div>
    </div>
  </div>
</div>

JavaScript:

function toggleSign(e) {
  $(e.target)
    .prev('.panel-heading')
    .find('i')
    .toggleClass('fa fa-minus fa fa-plus');
}
$('#accordion').on('hidden.bs.collapse', toggleSign);
$('#accordion').on('shown.bs.collapse', toggleSign);

Hope to get some positive help here as always, to find out how to achieve the effect I need.

Many thanks.

Answer 1

If you want the plus/minus to seamlessly transition, you could use pseudo elements rather than font icons (that's how it's being done in the example you provided). In doing so, you can avoid using any additional jQuery as well.

In the example below, the icon changes based on the .collapsed class that is automatically toggled on the .accordion-toggle element. The opacity of the ::after pseudo element is toggled to create the transition you're trying to achieve.

Updated Example

Snippet below:

 .accordion-toggle { position: relative; } .accordion-toggle::before, .accordion-toggle::after { content: ''; display: block; position: absolute; top: 50%; right: -22px; width: 14px; height: 4px; margin-top: -2px; background-color: #000; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: all 0.25s; transition: all 0.25s; } .accordion-toggle::before { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } .accordion-toggle.collapsed::before { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; } .accordion-toggle.collapsed::after { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } 

 <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script> <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body"> Collapsible Content #1 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" 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"> Collapsible Content #2 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" 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"> Collapsible Content #3 </div> </div> </div> </div> 

---

Alternatively, if you still want to use font awesome, you could use the following. Unfortunately, the transition isn't going to be as smooth as the one above because you can't transition between two icons like you can transition between pseudo elements.

Example Here

Snippet below:

 function toggleChevron(e) { $(e.target) .prev('.panel-heading') .find("i") .toggleClass('fa fa-minus fa fa-plus'); } $('#accordion').on('hidden.bs.collapse', toggleChevron); $('#accordion').on('shown.bs.collapse', toggleChevron); 

 .accordion-toggle + .fa { display: inline-block; -webkit-transition: all 0.25s; transition: all 0.25s; } .accordion-toggle.collapsed + .fa { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } 

 <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> <link rel="stylesheet" type="text/css" href="http://getbootstrap.com/dist/css/bootstrap.css"> <script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1 </a><i class="fa fa-plus"></i> </h4> </div> <div id="collapseOne" class="panel-collapse collapse"> <div class="panel-body"> Collapsible Content #1 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Collapsible Group Item #2 </a><i class="fa fa-plus"></i> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Collapsible Content #2 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Collapsible Group Item #3 </a><i class="fa fa-plus"></i> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Collapsible Content #3 </div> </div> </div> </div> 

Answer 2

您可能需要为此对象添加动画http://jsfiddle.net/ntd9fkzu/8/

** above this fiddle may help you **