Question

我对我找到的一个简单的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();

Updated Fiddle

更新

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

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

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

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

Answer 3

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

，这里是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 类点击。

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

3 个答案: