常见问题切换箭头动画

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'); 
    }); 
});