常見問題切換箭頭動畫

Question

你好，我有下面的代碼爲常見問題切換，但問題是當我點擊任何問題，它滑動並完美顯示答案，但所有問題觸發器中的所有箭頭。

<div class="faqbox" id="faq-list"> 
    <div class="qblock"> 
     <span class="arrow"></span> 
     <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</h2> 
     <div class="answer"> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p>  
     </div><!-- answer --> 
    </div><!-- qblock --> 

    <div class="qblock"> 
     <span class="arrow"></span> 
     <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</h2> 
     <div class="answer"> 
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p>  
     </div><!-- answer --> 
    </div><!-- qblock --> 


</div><!-- faqbox --> 

這是JS

function toggleFaqArrow(){  
    $('.qblock .arrow').toggleClass('rotate'); 
} 
$(document).ready(function() { 
    $('.qblock h2').click(function(){ 
     $(this).next('.answer').slideToggle(500); 
     $(this).toggleClass('close'); 
     toggleFaqArrow(); 
    }); 
}); 

Answer 1

你toggleFaqArrow()功能目標內所有arrow類元素全qblock類元素。您只需要將rotate類別的sibling切換爲點擊h2元素的類別arrow。

爲了實現這一目標，改變你的JS到：

$(document).ready(function() { 
    $('.qblock h2').click(function(){ 
     $(this).next('.answer').slideToggle(500); 
     $(this).toggleClass('close'); 
     $(this).siblings('.arrow').toggleClass('rotate'); 
    }); 
});