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

jQuery Accordion change font awesome icon class on click

提问by Patrick Heiloo

I have a question about a simple jQuery accordion I found.

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

I'd like to use Font Awesome icons to indicate the active/inactive state with plus and minus icons. In my JSFiddle you see the accordion titles with plus icons. When you click on a title the "fa-plus" class needs to change to "fa-minus".

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

I already did some tests with add and removeClass, but I couldn't get it working. I'm really a jQuery/javascript noob! Hope you guys can help me out :-).

我已经用 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/

http://jsfiddle.net/XrGU8/

回答by Felix

Why not chain your code instead of repeat yourself:

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

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

Updated Fiddle

更新的小提琴

---

---

Update:

更新：

Your final code should look like this:

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

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

Updated Fiddle

Updated Fiddle

回答by dcodesmith

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

Demo

演示

---

---

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 removes minus sign when other tabs are clicked

演示在单击其他选项卡时删除减号

回答by emilushi

This is a good solution but when using the first tab opened it gets a little messy. But you can make this work only using css. I'm using bootstrap accordion and font awesome and i created custom icon with it so when the tab is closed it gets the closed icon and when it is opened it get the other icon. here is the html code:

这是一个很好的解决方案，但是当使用打开的第一个选项卡时，它会变得有点混乱。但是您只能使用 css 来完成这项工作。I'm using bootstrap accordion and font awesome and i created custom icon with it so when the tab is closed it gets the closed icon and when it is opened it get the other icon. 这是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>

and down here is the css style:

下面是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"; 
}

i used to add extra class .accordion-icon-arrow-circleto accorion title and the .collapsedclass is called by bootstrap.js when the accordion title is clicked.

我过去常常在手风琴标题中添加额外的类.accordion -icon-arrow-circle，当单击手风琴标题时，bootstrap.js 会调用.collapsed类。