javascript - 如何使用CSS/jQuery 向下滑动显示DIV 的内容？

Question

我想创建一个向下滑动按钮来显示没有高度的 DIV 的内容。我在这里做了一个例子:

fiddle

我在寻找这种特殊形式的滑动按钮，但我所找到的只是 DIV 及其内容具有给定宽度和高度的示例。

在我的示例中，结构与此不同，但非常简单。分为三个不同的部门。具有给定高度的头部，应显示的内容 div(取决于填充)以及在其下方作为按钮的 slider /触发器(也具有给定高度)。

现在我想点击向下滑动到内容 div 高度的触发器，最后内容 div 应该出现。

如果有人能帮助我，那就太好了。

非常感谢。

Answer 1

我认为这就是您所看到的。

Fiddle

   $(document).ready(function () {
    $('.content').hide(); //hide initialy
    $('.slide').click(function () {
        var $this = $(this);
        // target only the content which is a sibling
        $(this).siblings('.content').slideToggle(200, function () {
            $this.text($(this).is(':visible') ? 'click to close' : 'click to open');
        });

    });
});