0

我不确定 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/

4

3 回答 3

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();
   }
});
于 2013-11-11T20:30:07.823 回答
0

当我查看 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;
 }

只是一个想法；希望它有帮助。

于 2013-11-11T20:43:30.820 回答
0 
/* 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 用右箭头覆盖默认图像。

希望这可以帮助。

于 2013-11-11T20:44:16.113 回答