单击时更改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/