Как я могу отменить добавление/удаление класса при нажатии?

Question

Я пытаюсь сделать аккордеон div со стрелкой вверх/вниз, который изменяется при нажатии. Когда я падаю вниз изменений со стрелками снизу вверх, но не перепутать ...

вот код:

accordion: function() { 
    $('#accordion').find('.accordion-toggle').click(function(){ 

     //expand or collapse this panel 
     $(this).next().slideToggle('fast'); 

     if($('.accordion-content').is(":visible")){ 
      //console.log('visible'); 
      $(this).find('span').removeClass('icon-arrow-down').addClass('icon-arrow-up'); 
     } else { 
      //console.log('invisible'); 
      $(this).find('span').removeClass('icon-arrow-up').addClass('icon-arrow-down'); 
     } 

     //hide the other panels 
     $('.accordion-content').not($(this).next()).slideUp('fast'); 
    }); 
}, 

Answer 1

Я думаю, что это должно работать с вами

$('#accordion').find('.accordion-toggle').click(function(){ 
      var thisIt = $(this); 
      //hide the other panels and return arrows to up 
      $('.accordion-content').not(thisIt.next('.accordion-content')).slideUp('fast',function(){ 
       $(this).closest('.accordion-toggle').find('span').removeClass('icon-arrow-up').addClass('icon-arrow-down'); 
      }); 
      //expand or collapse this panel 
      thisIt.next('.accordion-content').slideToggle('fast' , function(){ 
       $(this).closest('.accordion-toggle').find('span').toggleClass('icon-arrow-down icon-arrow-up'); 
      }); 
     }); 

может помочь

Answer 2

У вас возникнут проблемы с проверкой его видимости с помощью JQuery Slide. В отличие от .show() и .hide(), слайд не сразу меняет видимость элемента. Таким образом, вы запускаете функцию .slideToggle(), и WHILE элемент все еще раздвигается (он же, все еще видимый), вы спрашиваете, видно ли это. Таким образом, вы всегда правдивы, поэтому оставляете стрелу вниз.

Либо добавить класс и проверить его, как таковой:

$(this).next().slideToggle('fast').toggleClass('im-open-yo'); 
... 
if($('.accordion-content').hasClass("im-open-yo"){ 
... 
$('.accordion-content').not($(this).next()).slideUp('fast').removeClass('im-open-yo'); 

ИЛИ запускать запросы на функцию полного обратного вызова, потому что тогда видимость элемента будет изменен:

$(this).next().slideToggle('fast',function(){ 
if(){...} 
}); 

Кроме того, одна вещь, чтобы высматривать,

if($('.accordion-content').is(":visible")) 

будет проверять для ЛЮБОГО аккордеониста сотрудничества чтобы быть видимым. Итак, если класс стрелок для всего аккордеона велик. Если, однако, стрелка доступна для любого из аккордеонных переключателей, вам нужно будет установить это по-другому.