Jquery 在图像之间切换

Question

我正在尝试用 HTML、css 和 jQuery 制作一个常见问题解答页面。 我想在打开问题时旋转我的箭头，并在单击另一个问题时将其旋转回来。我设法用 <p> 做到了标签，但我现在在处理图像时遇到了麻烦。 有人知道怎么做吗？

这是我写的代码: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

我编辑了你的 fiddle :http://jsfiddle.net/jmex1p5g/63/

基本上，在将它添加到所选图像之前，您应该从所有图像中删除 rotate 类。这是一种常见的做法。

遵循相关代码:

$('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