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

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

Jquery切换子元素的幻灯片

2 个答案: