2016-03-23 22 views
0

HTML, css ve jQuery'de bir SSS sayfası oluşturmaya çalışıyorum. Soruyu açarken okumu döndürmek ve başka bir soruyu tıklarken geri döndürmek istiyorum. Bunu <p> etiketleriyle yapmayı başardım, ancak şimdi görüntüde sorun yaşıyorum. Birisi bunu nasıl yapacağını biliyor mu?Jquery, görüntüler arasında geçiş yapar.

Bu yazdım kodudur:

http://jsfiddle.net/jmex1p5g/63/ Temel olarak seçilen birine eklemeden önce tüm görüntülerden rotate sınıfını kaldırması gerekir:

$(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'); 
     } 
    }); 
    }); 
+0

Kodunuz bir felaket. Ben 'li 'bir' 'active' 'sınıfını eklemek/kaldırmak ve geri kalanını CSS ile halledeyim. Ya da sadece [bu bir] gibi bir eklenti kullanın (http://www.jqueryscript.net/demo/Simple-Smooth-FAQ-Accordion-with-jQuery-CSS-FAQ-Slider/). – Miro

cevap

1

http://jsfiddle.net/jmex1p5g/62/ Ben senin keman düzenlenebilir. Bu yaygın bir uygulamadır.

ilgili kodun Şöyledir:

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

Teşekkürler. Bunu gelecekte unutmayacağım. – KimberlyGS

+0

yumruk pompa dostum :) – morels

İlgili konular