javascript - 如何使用jQuery在2个类之间切换？

我不确定toggleClass是执行此操作的最佳方法，但是我有一个手风琴菜单，并且尝试将右侧的图标/图像从RIGHT箭头更改为DOWN箭头。

第一次单击3个菜单项会显示DOWN图像（.icon-03），但是当我在手风琴项目之间切换时，它不会返回到右箭头图像/类（.icon-04）。
有什么想法？

/* Accordion */
$(document).ready(function () {
  $('#accordionFAQ > li > a').click(function(e){
    if ($(this).attr('class') != 'active'){
      $('#accordionFAQ li ul').slideUp();
      $(this).next().slideToggle();
      $('#accordionFAQ li a').removeClass('active');
      $(this).addClass('active');

      //add down arrow
      $('> span', this).toggleClass('icon-03 icon-04');

      //prevent page reload
      e.preventDefault();
    }
  });
});

演示JS小提琴：http://jsfiddle.net/957Fs/

最佳答案

首先，$(this).attr('class') != 'active'效率很低（并且可能无法完全工作），请改用$(this).hasClass('active')。

在您发表评论后，我重新添加了这些类-以下内容应该可以工作：

$('#accordionFAQ > li > a').click(function(e){
   if (! $(this).hasClass('active') ){
       $('.active')
           .find('span').toggleClass('icon-03 icon-04')
           .end().removeClass('active')
           .next().slideUp();
       $(this).find('span').toggleClass('icon-03 icon-04')
           .end().addClass('active')
           .next().slideDown();
       //prevent page reload
       e.preventDefault();
   }
});

关于javascript - 如何使用jQuery在2个类之间切换？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19915209/