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

Question

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

小提琴

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

在我的示例中，结构与此不同，但它非常简单。分为三个不同的部门。具有给定高度的头部，应显示的内容 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');
            }
        });
    });
});

小提琴