子元素的Jquery切换幻灯片

我试图创建一个标题列表，当单击时，它将显示标题下的信息，然后当再次单击时，它将隐藏该元素

以下是我的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>

党墙法
乱数假文。。。。。

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

使用

toggle（）

和

toggleClass（）

使用

toggle（）

和

toggleClass（）

---

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

$(".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");
    }
});

---

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

$(".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");
    }
});

---

你的问题是什么？抱歉，编辑并添加：）你的问题是什么？抱歉，编辑并添加：）非常感谢。我也不知道我可以在slideDown上使用切换。这很管用：）又是一个建议。。这更简单，更容易使用：非常感谢。我也不知道我可以在slideDown上使用切换。这很管用：）又是一个建议。。这更简单，更易于使用：