Jquery zwischen den Bildern wechseln

Question

Ich versuche, eine FAQ-Seite in HTML, CSS und jQuery zu machen. Ich möchte meinen Pfeil beim Öffnen der Frage drehen und ihn beim Klicken auf eine andere Frage zurückdrehen. Ich schaffte es mit den <p> Tags, aber ich habe jetzt Probleme mit dem Bild. Weiß jemand, wie man das macht?

Dies ist der Code, den ich schrieb: http://jsfiddle.net/jmex1p5g/62/

$(document).ready(function(){ 
    var $li_p = $('ul[class="questions"] li').children('p'); 
    var $li_a = $('ul[class="questions"] li').children('a'); 
    if($li_p.slideToggle().toggleClass('closed')){ 
    $li_p.hide(); 
    } 
    $('ul[class="questions"] li').click(function() { 
     var ullist = $(this).children('p:first'); 
     ullist.slideToggle().toggleClass('closed'); 

     var isVisible = ullist.is(".closed"); 
     var siblings = $(this).siblings('li'); 
     $.each(siblings, function (i, key) { 
      if ($(key).find('a').hasClass('icon_minus')) {   
       var sibling = $(key).children('p:first'); 
       $(sibling).slideToggle().addClass('closed'); 
      $(key).find('a').removeClass('icon_minus').addClass('icon_plus'); 
      } 
     }); 


     var img_icon = $(this).children('a'); 
     var image = $(this).children('span'); 

     var realimage = $(image).children('img'); 
     if (isVisible === true){ 
      img_icon.removeClass('icon_minus').addClass('icon_plus'); 
      realimage.removeClass('rotate'); 
      $(this).siblings('img').removeClass('rotate'); 
     } else { 
      img_icon.removeClass('icon_plus').addClass('icon_minus'); 
      realimage.addClass('rotate'); 
     } 
    }); 
    }); 

Answer 1

ich Ihre Geige bearbeitet: http://jsfiddle.net/jmex1p5g/63/

Grundsätzlich sollten Sie entfernen die rotate Klasse von allen Bildern, bevor es in die eine ausgewählte Zugabe. Es ist eine gängige Praxis.

Folgt den entsprechenden Code:

$('ul[class="questions"] li').click(function() { 
    // ... 
    // code 
    // ... 

    var img_icon = $(this).children('a'); 
    var image = $(this).children('span'); 

    var realimage = $(image).children('img'); 
    if (isVisible === true){ 
     img_icon.removeClass('icon_minus').addClass('icon_plus'); 
     $('li.question img').removeClass('rotate'); 
     realimage.toggleClass('rotate'); 
    } else { 
     img_icon.removeClass('icon_plus').addClass('icon_minus'); 
     $('li.question img').removeClass('rotate'); 
     realimage.toggleClass('rotate'); 
    } 
}); 

    //... 
    //the rest of code