jquery - 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");

    });
});

在这里摆弄

Answer 2

您需要在点击事件中设置条件，以显示/隐藏内容。现在你绑定了两次点击事件，最后一个覆盖了前一个。您应将代码更改为以下内容：

$(".reveal-more").click(function() {
    if ($(".content", this).hasClass('open-information')){
        // It is visible, then hide it
        $(".content", this).removeClass("open-information").slideUp("slow");
        $("h3", this).removeClass("open-container");
    } else {
        // Show it, as you previously did
        $(".content", this).addClass("open-information").slideDown("slow");
        $("h3", this).addClass("open-container");
    }
});