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

Question

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

小提琴

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

在我的示例中，该结构与之不同，但是非常简单。 有三个不同的部门。 具有给定高度的头部，应显示内容div（取决于填充），并在滑块/触发器（也具有给定高度）下方显示为按钮。

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

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

非常感谢。

Answer 1

我认为这就是您正在查看的内容。

小提琴

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

    });
});

Answer 2

您应该尝试使用slideToggle() （它在加载jQuery时也会有所帮助，但这在您制作时可能只是一个疏忽）：

$(document).ready(function () {
    $('.slide').click(function () {
        $(this).prev('.content').slideToggle(500, function () {
            $this = $(this);
            $slide = $('.slide');
            if ($this.is(':visible')) {
                $slide.text('Click to close');
            } else {
                $slide.text('Click to open');
            }
        });
    });
});

小提琴