0

私は自分のページの機能に取り組んできましたが、使いやすさは私が目標としてきたことの 1 つです。レイアウトを改善するために、折りたたみ可能なセクションを作成することにしました。ただし、2つの問題があります。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) 物事を行う 1 つの方法である自動高さを使用しているため、スライドが展開したり折りたたんだりするときにスライドのアニメーションを犠牲にしています。ただし、高さをコンテンツのサイズに合わせて変更し、アニメーションを維持する方法を誰かが知っていれば、それは素晴らしいことです。

4

1 に答える 1

5

あなたはタイプミスをしました：

$(".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/

于 2013-01-09T10:57:45.100 に答える