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

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

我看到Lukasz Watroba对vAccordion的影响.

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

加价:

  

    

      

        
          Collapsible Group Item #1  
        
      
    
    

      

        Collapsible Content #1
      
    
  
  

    

      

        
           Collapsible Group Item #2 
        
      
    
    

      

        Collapsible Content #2
      
    
  
  

    

      

        
          Collapsible Group Item #3  
        
      
    
    

      

        Collapsible Content #3
      
    
  

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

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

非常感谢.

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

在下面的示例中,图标会根据在元素.collapsed上自动切换的类而更改.accordion-toggle.::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);
}

  

    

      

        
          Collapsible Group Item #1
        
      
    
    

      

        Collapsible Content #1
      
    
  
  

    

      

        
           Collapsible Group Item #2
        
      
    
    

      

        Collapsible Content #2
      
    
  
  

    

      

        
          Collapsible Group Item #3
        
      
    
    

      

        Collapsible Content #3