Javascript 点击jQuery手风琴更改字体awesome图标类

我有一个关于我找到的一个简单的jQuery手风琴的问题

我想使用字体可怕的图标来表示活动/非活动状态加上和减图标。 在我的JSFIDLE中，您可以看到带有加号图标的手风琴标题。当你点击一个标题时，“fa plus”类需要改为“fa minus”

我已经用add和removeClass做了一些测试，但是我无法让它工作。我真的是一个jQuery/JavascriptNoob！希望你们能帮助我：-）

---

---

为什么不链接代码而不是重复自己的代码：

jQuery('.accordion dt').click(function() {
    jQuery(this).find('i').toggleClass('fa-plus fa-minus')
                .closest('dt').next().slideToggle()
                .siblings('.accordion_content').slideUp();
});

jQuery('.accordion_content').hide();

---

更新：

您的最终代码应该如下所示：

jQuery('.accordion dt').click(function() {
    jQuery(this).toggleClass('active').find('i').toggleClass('fa-plus fa-minus')
           .closest('dt').siblings('dt')
           .removeClass('active').find('i')
           .removeClass('fa-minus').addClass('fa-plus');

    jQuery(this).next('.accordion_content').slideToggle()
                .siblings('.accordion_content').slideUp();  
});

jQuery('.accordion_content').hide();

---

这是一个很好的解决方案，但是当使用打开的第一个选项卡时，它会变得有点混乱。但是您只能使用css来实现这一点。我使用引导手风琴和字体真棒，我用它创建了自定义图标，所以当选项卡关闭时，它会得到关闭的图标，当它打开时，它会得到另一个图标。以下是html代码：

<div class="accordion-group">
 <div class="accordion-heading">
   <a class="accordion-toggle accordion-icon-arrow-circle" href="#collapseOne" data-   toggle="collapse" data-parent="#accordion2">
    <span class="accordion-icon"></span> 
   Accordion Title
   </a>
 </div>
 <div id="collapseOne" class="accordion-body collapse in">
  <div class="accordion-inner">Here will be the accordion text</div>
 </div>
</div>

---

我曾经在accorion标题中添加额外的类。手风琴图标箭头圈，单击手风琴标题时，bootstrap.js会调用该类。

@dcodesmith抱歉！我是新来的：-）@dcodesmitch我用你的代码更新了我的小提琴，但看看当你点击另一个标题时，其他的会发生什么。@PatrickHeiloo我用代码更新了他的答案以适应它。@JoshPowell真棒！这就是我要找的。谢谢你的快速帮助！没问题，伙计，祝你好运！干杯@Josh Powell；）+谢谢你把它简化了！但是当你点击一个不活动的标签时，减号图标需要重置为加号，而新的活动图标需要为减号。对不起，我的英语很差，我是荷兰人。@Felix是的，你快到了！当你点击一个活动标签时，它会关闭，但标题上的活动类不会被删除（它保持活动状态）。@PatrickHeiloo我不明白你的意思，你能再详细说明一下吗？关闭选项卡后，我看不到任何活动类仍然存在。@PatrickHeiloo您确定打开的是正确的小提琴演示吗？@Felix如果单击标题，标题将激活该类，图标将变为负号。当您单击同一标题时，活动类将不会被删除。谢谢，您可以将其默认折叠吗？我已经知道如何将其默认折叠，您需要将“折叠”类添加到包含“手风琴图标箭头圆”的同一元素中/

jQuery('.accordion dt').click(function() {
    jQuery(this).find('i').toggleClass('fa-plus fa-minus')
                .closest('dt').next().slideToggle()
                .siblings('.accordion_content').slideUp();
});

jQuery('.accordion_content').hide();

jQuery('.accordion dt').click(function() {
    jQuery(this).toggleClass('active').find('i').toggleClass('fa-plus fa-minus')
           .closest('dt').siblings('dt')
           .removeClass('active').find('i')
           .removeClass('fa-minus').addClass('fa-plus');

    jQuery(this).next('.accordion_content').slideToggle()
                .siblings('.accordion_content').slideUp();  
});

jQuery('.accordion_content').hide();

<div class="accordion-group">
 <div class="accordion-heading">
   <a class="accordion-toggle accordion-icon-arrow-circle" href="#collapseOne" data-   toggle="collapse" data-parent="#accordion2">
    <span class="accordion-icon"></span> 
   Accordion Title
   </a>
 </div>
 <div id="collapseOne" class="accordion-body collapse in">
  <div class="accordion-inner">Here will be the accordion text</div>
 </div>
</div>

.accordion-icon-arrow-circle {
   position:relative
}

.accordion-icon {
  position: absolute;
  left: 7px;
  top: 7px;
  display: block;
  width: 20px;
  height: 20px;
  line-height: 21px;
  text-align: center;
  font-size: 14px;
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  *margin-right: .3em;
}
.accordion-icon-arrow-circle .accordion-icon:before { 
  content: "\f0ab"; 
}
.accordion-icon-arrow-circle.collapsed .accordion-icon:before { 
  content: "\f0a9"; 
}