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

Question

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

javascriptjquerycssaccordionfont-awesome

3

我有一个关于jQuery折叠菜单的问题。

我想使用Font Awesome图标来表示活动/非活动状态，使用加号和减号图标。

在我的JSFiddle中，您可以看到带有加号图标的折叠菜单标题。当您单击标题时，“fa-plus”类需要更改为“fa-minus”。

我已经尝试了一些添加和删除类的测试，但无法使其正常工作。我真的是一个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/

- Patrick Heiloo

@dcodesmith 抱歉！我是新来的 :-) - Patrick Heiloo

3个回答

3

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

点击此处查看演示，点击其他标签时会去掉减号

- dcodesmith

@dcodesmitch，我使用你的代码更新了我的fiddle，但是当你点击另一个标题时，请看看其他的会发生什么。 - Patrick Heiloo

1

@PatrickHeiloo，我已经更新了他的回答并添加了代码来适应那个。 - Josh Powell

@JoshPowell 太棒了！这正是我所寻找的。感谢您的快速帮助！ - Patrick Heiloo

没问题，伙计！祝你好运！ - Josh Powell

1

谢谢 @JoshPowell ;) - dcodesmith

@JoshPowell 当点击其他选项卡时，减号将被移除。但是当您点击相同的活动选项卡时，减号不会被加号替换。 - Patrick Heiloo

2

这是一个不错的解决方案，但当使用第一个打开的选项卡时会变得有些混乱。但您可以仅使用CSS使其正常工作。我正在使用Bootstrap手风琴和Font Awesome，并创建了自定义图标。因此，当选项卡关闭时，它会显示关闭的图标，而当它打开时则显示另一个图标。以下是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"; 
}

我曾经给折叠面板标题添加了额外的类名.accordion-icon-arrow-circle，当折叠面板标题被点击时，.collapsed类由bootstrap.js调用。

- emilushi

谢谢，您能否默认将其折叠起来？ - Yevgeniy Afanasyev

我已经找到了如何使其默认折叠的方法，您需要将“collapsed”类添加到与“accordion-icon-arrow-circle”相同的元素中。 - Yevgeniy Afanasyev

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Felix · Accepted Answer

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

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

已更新的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