Как я могу использовать jQuery для переключения между 2 классами?

0

Я не уверен, что toggleClass - лучший способ сделать это, но у меня есть меню аккордеона, и я пытаюсь чередовать значок/изображение с правой стороны от стрелки ВПРАВО до стрелки ВНИЗ.

Первый щелчок по 3 пунктам меню показывает изображение DOWN (.icon-03), но когда я переключаюсь между элементами аккордеона, он не возвращается к стрелочному изображению/классу RIGHT (.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 Fiddle: http://jsfiddle.net/957Fs/

  • 0
    Вы используете JQuery UI?
  • 0
    Я не вижу ссылки в ревизии @FastTrack
Показать ещё 7 комментариев
Теги:

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();
   }
});
Поделиться
  • 0
    Как это ответ? Это пара предложений по кодированию, но не ответ на вопрос, почему это не работает.
  • 0
    @ jfriend00 это ответ, потому что, если OP реализует его таким образом, это проще И это работает.
Показать ещё 9 комментариев
0 
/* Accordion */
$(document).ready(function () {
  var accordionFAQ = $('#accordionFAQ');

  // let use jQuery .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 span
      that.find('span').addClass('right');

    }

  });

});

Затем вы можете иметь изображение по умолчанию по умолчанию - стрелка влево. и когда вы добавите класс.right, он переопределит изображение по умолчанию со стрелкой вправо, используя CSS.

надеюсь это поможет.

Поделиться
0

Когда я смотрю пример JSFiddle, он работает для меня, поэтому я думаю, что он уже обновлен. Я бы хотел сделать предложение: возможно, неплохо просто переключить класс (например, "активный") на элементы списка и обработать остальные с помощью чистого 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;
 }

Просто идея; надеюсь, что это полезно.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню