Jquery 子元素切换幻灯片

Question

我正在尝试创建一个标题列表，单击该列表时将显示其下方的信息，然后再次单击时将隐藏该元素。

这是我的 jQuery:

$(document).ready(function() {

        $('.content').hide();

        $(".reveal-more").click(function() {
            $(".content", this).slideDown("slow");
            $(".content", this).addClass("open-information");
            $(".reveal-more h3").addClass("open-container");

        });

        $(".reveal-more").click(function() {

            $(".content").hide();
        });

});

这是我的 HTML:

<div class="reveal-more ">
    <h3 >Party Wall Act</h3>
    <div class="content">
             Lorem Ipsum .....
            </div>
</div>

当我点击标题时。内容会向下滑动，但再次单击时不会再向上滑动。有人可以帮忙吗？

Answer 1

使用toggle()和toggleClass();

$(document).ready(function() {

    $('.content').hide();

    $(".reveal-more").click(function() {
        $(".content", this).toggle("slow");
        $(".content", this).toggleClass("open-information");
        $(".reveal-more h3").toggleClass("open-container");

    });
});

fiddle here