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

Question

我正在尝试学习如何在点击时将加号图标旋转/旋转为减号。

我看到Lukasz Watroba对vAccordion的影响 。

现在我只能让代码将加号图标切换为减号图标，但没有旋转/转换效果：

加价：

<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);

希望能够一如既往地得到一些积极的帮助，找出如何实现我需要的效果。

非常感谢。

Answer 1

如果您希望正/负无缝转换，您可以使用伪元素而不是字体图标（这就是您在提供的示例中完成的方式）。 这样做，您可以避免使用任何其他jQuery。

在下面的示例中，图标会根据.collapsed .accordion-toggle元素自动切换的.collapsed类进行更改。 切换::after伪元素的不透明度以创建您尝试实现的转换。

更新的示例

下面的代码段：

 .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> 

---

或者，如果您仍想使用字体真棒，则可以使用以下内容。 不幸的是，转换不会像上面那样平滑，因为你不能在两个图标之间转换，就像你可以在伪元素之间转换一样。

这里的例子

下面的代码段：

 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 **