Question

我不确定toggleClass是最好的方法，但我有一个手风琴菜单，我试图将右侧的图标/图像从右箭头转换为向下箭头。

第一次点击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/

Answer 1

首先，$(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();
   }
});

Answer 2

当我查看JSFiddle示例时，它对我有用，所以我猜它已经更新了。我想提出一个建议：在列表项上切换一个类（例如'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;
 }

只是一个想法;希望它有用。

Answer 3

/* 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在2个类之间切换？

3 个答案: