常见问题--弓箭动画

Question

你好，我下面有FAQ的代码，但问题是，当我点击任何问题时，它会滑行并完美地显示答案，但是所有问题中的所有箭头都会触发。

<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()函数的目标是在所有 qblock类元素中的所有 arrow类元素。您只想切换兄弟姐妹的兄弟姐妹类，单击h2元素的类arrow。

为此，请将JS更改为：

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