Javascript 如何使用jQuery在两个类之间切换？

我不确定toggleClass是否是最好的方法，但我有一个手风琴菜单，我正在尝试将右侧的图标/图像从右箭头切换到下箭头

第一次单击3个菜单项显示向下图像（.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();
    }
  });
});

Demo JS Fiddle:

首先，

$（this.attr（'class'）！='活动的“

效率很低（并且可能完全无法工作），请使用

$（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();
   }
});

---

当我看JSFIDLE示例时，它对我来说是有效的，所以我想它已经更新了。不过，我想提出一个建议：在列表项上切换一个类（例如“is active”），然后用纯CSS处理其余的类，这可能是一个好主意。例如：

var $faq = $('#accordionFAQ');
$faq.on('click', '> li > a', function (event) {
    $(this).parent().toggleClass('is-active');
});

在CSS中，您可以执行以下操作：

#accordionFAQ > li > a span {
  // width, height etc
  background-position: x y;
}
#accordionFAQ > li.is-active > a span {
  background-position: x y;
 }

只是一个想法；希望对你有帮助

/* Accordion */
$(document).ready(function () {
  var accordionFAQ = $('#accordionFAQ');

  // let's use jQuery's .on() rather than .click()
  accordionFAQ.find('a').on({

    click:function(e){

      // prevent the default action
      e.preventDefault();

      // setup some variables
      var that = $(this);

      // close open ULs
      accordionFAQ.find('ul').slideUp();

      // remove .active from other controller
      accordionFAQ.find('.active').removeClass('active');

      // add .active to clicked controller and show UL
      that.addClass('active').next().slideDown();

      // remove .right from span
      accordionFAQ.find('.right').removeClass('right');

      // add .right to current controller's span
      that.find('span').addClass('right');

    }

  });

});

然后，可以将span的默认图像设置为左箭头。当您添加.right类时，它将使用CSS用右箭头覆盖默认图像

---

希望这能有所帮助。

您使用的是jQuery UI吗？我没有，请参阅revision@fastTrack中的链接span是否有c3或c4类开始？否则，它可能会同时添加它们并将它们一起删除。不要链接到外部站点，因为该url将来可能会有所不同…在jsfiddle.net中提供实时演示，允许人们与代码交互以帮助找到解决方案查看处理程序的第一行：

if（$（this）.attr（'class'）！='active'）{

。当您单击链接时，它会添加活动类，因此下次单击时，该条件会失败，并且不会发生任何变化。这是一个如何回答的问题？这是一些编码建议，但不是对为什么它不起作用的问题的回答。@jfriend00这是一个答案，因为如果OP以这种方式实现它，它会更容易，也更有效。这s未能解决一个问题，即一旦链接具有活动类，它就什么也不做（这是OPs的实际问题）。@Mathletics好吧，要么你误读了问题或我的答案。它完全符合OP的要求—单击另一个手风琴项目后恢复旧项目。这是一个笑话吗？你测试过吗？