常见问题切换箭头动画

Question

您好，我有下面的FAQ 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类元素。 您只想通过单击h2元素的类arrow来切换同级的rotate类。

为此，请将您的JS更改为：

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