点击改变DIV的高度

Changing DIV height on click

本文关键字：高度 DIV 改变      更新时间：2023-09-26

我一直致力于我的网页的功能和易用性一直是我的目标之一。为了改善我的布局，我决定创建可折叠的部分。然而，我有两个问题。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)因为我使用自动高度，这是一种做事的方式，我牺牲了我的滑动动画时，它的膨胀和崩溃。然而，如果有人知道一种方法来保持高度改变内容的大小，以及保持我想要的动画，那将是辉煌的

你打错字了:

$(".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。我无法让它与过渡一起工作，但让它与animate:

一起工作http://jsfiddle.net/uLabL/

相关文章：