javascript - 单击时更改 DIV 高度

Question

我一直在研究页面的功能，并且易用性一直是我的目标之一。为了改进我的布局，我决定创建可折叠部分。但是，我有两个问题。 1)我可以将DIV设置为扩大，但不能再次缩小。所以我决定创建一些东西来告诉它如果它大于最小尺寸，则扩展内容，但现在它也不会扩展。这是我的代码:

$(".contentBox").click(function(){
    var boxHeight = $(this).height();
    var minBoxHeight = 40;

    if (boxHeight < minBoxHeight)(function() {
        $(this).css({
            height: 'auto',
            transition: 'height 800ms, background 800ms, box-shadow 800ms'
        });
    )};
});

2)因为我使用自动高度，这是做事的一种方式，所以我牺牲了扩展和折叠时的滑动动画。然而，如果有人知道一种方法来保持高度随内容大小变化以及保持动画，我希望那会很棒。

Answer 1

您输入错误:

$(".contentBox").click(function(){
        var boxHeight = $(this).height();
        var minBoxHeight = 40;

        if (boxHeight <= minBoxHeight) {
            $(this).css('height', 'auto');
            var tmp_height = $(this).height();
            $(this).css('height', boxHeight+'px');
            $(this).css({
                height : tmp_height+'px',
                transition: 'height 800ms, background 800ms, box-shadow 800ms'
            });
        } else {
            $(this).css({
                height: '40px',
                transition: 'height 800ms, background 800ms, box-shadow 800ms'
            });
        }
    });

这将让它展开和折叠

我相信这可以解决所有问题。您可以计算 div 的高度，并将内容放入变量中。将其重置到原来的位置。然后进行转换。

这是一个jsfiddle。我无法让它与过渡一起工作，但让它与动画一起工作:

http://jsfiddle.net/uLabL/