如何显示元素的一部分，并在单击时切换到所有元素

How can I show part of an element, and toggle to all of the element on click?

本文关键字：元素 单击 何显示 显示 一部分      更新时间：2024-02-16

我知道如何使用slideDown()来显示以前隐藏的元素。

但是，我如何为单个元素执行此操作？也就是说，不是切换隐藏的元素，而是增长流体高度元素的可见窗口？

这是一把小提琴：http://jsfiddle.net/PzA5D/

这里有一些HTML标记：

<div class="mydiv">
    <img src="http://placehold.it/200x400&text=long+img">
</div>
<button class="btn">View More</button>

和CSS：

.mydiv {
    height: 100px;
    min-height: 100px;
    overflow: hidden;
}

和JS：

$('.btn').on('click', function(e){
    e.preventDefault();
    $('.mydiv').slideDown();
});

注意，我知道我的例子有一个固定的高度，但假设图像可以是任何高度。但无论高度如何，只有前100像素才会显示，直到点击"查看更多"。

更新

如果可能的话，我更愿意保留向下滑动风格的动画。

fiddle Demo 

var mydiv = $('.mydiv');
$('.btn').on('click', function (e) {
    e.preventDefault();
    mydiv.animate({
        height: mydiv.find('img').height()
    }, 1000);
});

如果你想让它上下滑动但不完全隐藏，你需要使用animate()

http://jsfiddle.net/PzA5D/2/

$('.btn').on('click', function(e){
    e.preventDefault();
    if($('.mydiv').height() < "210") {
        $('.mydiv').animate({height: $('.mydiv .wrapper').height() + 'px'}, 1000);
    } else {
        $('.mydiv').animate({height: '205px'}, 1000);
    }
});

EDIT:包括一个.wrapperdiv，这样它里面就可以有任何东西，而不仅仅是一个图像，而且动画仍然可以工作。

尝试

$('.btn').on('click', function (e) {
    e.preventDefault();
    var $div = $('.mydiv')
    $div.animate({
        'height': $div.prop('scrollHeight')
    });
});

演示：Fiddle

相关文章：