jQuery Accordion在点击时更改字体真棒图标类

我有一个关于我发现的简单jQuery手风琴的问题。

我想使用Font Awesome图标来指示带有加号和减号图标的活动/非活动状态。 在我的JSFiddle中，你会看到带有加号图标的手风琴标题。 单击标题时，“fa-plus”类需要更改为“fa-minus”。

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

jQuery('.accordion dt').click(function() { jQuery('.accordion dt').removeClass('active'); jQuery('.accordion_content').slideUp('normal'); if(jQuery(this).next().is(':hidden') == true) { jQuery(this).addClass('active'); jQuery(this).next().slideDown('normal'); } }); jQuery('.accordion_content').hide(); 

http://jsfiddle.net/XrGU8/

Answer 1

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

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

更新小提琴

Answer 2

 jQuery('.accordion dt').click(function() { $(this).find('i').toggleClass('fa-plus fa-minus') // add this line jQuery('.accordion dt').removeClass('active'); jQuery('.accordion_content').slideUp('normal'); if(jQuery(this).next().is(':hidden') == true) { jQuery(this).addClass('active'); jQuery(this).next().slideDown('normal'); } }); jQuery('.accordion_content').hide(); 

演示

---

 jQuery('.accordion dt').click(function() { $('.accordion dt').find('i').removeClass('fa-minus'); // Hides the minus sign on click $(this).find('i').addClass('fa-plus fa-minus'); // add this line jQuery('.accordion dt').removeClass('active'); jQuery('.accordion_content').slideUp('normal'); if(jQuery(this).next().is(':hidden') == true) { jQuery(this).addClass('active'); jQuery(this).next().slideDown('normal'); } }); jQuery('.accordion_content').hide(); 

单击其他选项卡时，Demo会删除减号

Answer 3

这是一个很好的解决方案，但是当使用第一个打开的标签时，它会变得有点混乱。 但是你只能使用css来完成这项工作。 我正在使用bootstrap手风琴和字体很棒，我用它创建了自定义图标，所以当标签关闭时，它会获得关闭的图标，当它打开时，它会获得另一个图标。 这是html代码：

 
 
   Accordion Title  
 
 
Here will be the accordion text
 
  

而这里是css风格：

 .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"; } 

我习惯在accorion标题中添加额外的类.accordion -icon-arrow-circle ，当点击手风琴标题时，bootstrap.js会调用.collapsed类。