Question

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

fiddle

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

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

现在我想点击关于内容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');
        });

    });
});

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

fiddle

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

2 个答案:

Fiddle