javascript - 如何编写jquery Accordion 脚本？

Question

下午好

问答 block 需要按类型accordion在jquery上编写脚本

block html(此类 block 将重复):

<div class="question">
    <h3 class="question__title">Что влияет на стоимость услуг?</h3>
    <div class="question__icon"></div>
    <div class="question__wr">
        <p class="question__text text">Стоимость услуг зависят от нескольких факторов:</p>
    </div>
</div>

它应该如何工作:

通过点击question标签上的question__title，question--open标签被添加并且 block 展开，同时前一个 block 已折叠。

这是我的脚本，但它无法正常工作，它会立即部署所有 block

$(".question__title").click(function() {
    $(".question").addClass("question--open");
    $(".question__title").click(function() {
        $(".question").removeClass("question--open");
    });
    return false;
});

请告诉我如何正确编写脚本？

谢谢。

Answer 1

您只需将 question--open 类添加到单击的元素即可展开它并折叠您需要从中删除此类的所有其他标签。

$(".question__title").click(function() {
     $(".question").not($(this).closest("div.question")).removeClass("question--open");
     $(this).closest("div.question").toggleClass("question--open");
});

行 $(".question").removeClass("question--open"); 是删除事件类以折叠它们，

$(this).closest("div.question").addClass("question--open");

就是给被点击的元素添加active类，使其展开。