常见问题解答切换箭头动画

Question

你好我有以下常见问题Toggle的代码，但问题是当我点击它滑动的任何问题并完美地显示答案但所有问题触发器中的所有箭头。

<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元素的arrow个sibling的h2类。

要实现此目的，请将您的JS更改为：

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