Jquery Accordion在点击时改变了Fontawesome图标

时间:2014-07-18 23:07:08

标签: jquery font-awesome jquery-ui-accordion removeclass

我有一个非常简单的手风琴,我已经用类.fa-angle-down添加了一个字体真棒图标。

我添加了一个toggleClass,所以当点击.accordion-toggle时,它会旋转图标180,使其向上而不是向下。

我需要帮助的是在下一位添加,如果任何其他.accordion-toggle具有类.rotate180然后删除它。

我试过这个 -

$(".fa-angle-down").not($(this)).removeClass('rotate180');

但是它只是从所有人中移除了......帮助?

  $(document).ready(function($) {
  $('#accordion').find('.accordion-toggle').click(function(){

  $(this).next().slideToggle('fast');
  $(this).toggleClass('active')
  $(".fa-angle-down").toggleClass('rotate180')

  $(".accordion-content").not($(this).next()).slideUp('fast');
  $(".accordion-toggle").not($(this)).removeClass('active');

  });
  });

2 个答案:

答案 0 :(得分:1)

找到所有拥有该类的内容然后将其删除

$("#accordion").accordion();

$('#accordion .accordion-toggle').click(function () {

    // Whatever other code here too

    //Remove all rotate180
    $('.rotate180').removeClass('rotate180');
    //Now just add it for 'this'
    $(this).children('.fa-angle-down').addClass('rotate180');
});

此处的演示演示:http://jsfiddle.net/md3hd/

答案 1 :(得分:0)

解决了 - 我没有使用.find来定位我需要的东西。

$(document).ready(function($) {
$('#accordion').find('.accordion-toggle').click(function(){

$(this).next().slideToggle('fast');
$(this).toggleClass('active');
$(this).find('.fa-angle-down').toggleClass('rotate180');

$(".accordion-content").not($(this).next()).slideUp('fast');
$(".accordion-toggle").not($(this)).removeClass('active');
$(".accordion-toggle").not($(this)).find('.fa-angle-down').removeClass('rotate180');

});
  });