0

ここで例を参照してくださいhttp://jsfiddle.net/jitendravyas/P6vKf/14/

jsfiddle リンクを更新しました

この例では、表示/非表示用に 3 つの異なるモジュールがあり、アイテムの表示と非表示の高さがすべて異なります。

$(function(){
   $(".more-destination").click(function(){
          $(this).parent().prev("ul").animate({
              height: "500px"
           }, 800, function() {});
          $(this).next(".less-destination").toggle();
          $(this).toggle();
   });

   $(".less-destination").click(function(){
         $(this).parent().prev("ul").animate({
             height: "200px"
          }, 800, function() {});
         $(this).prev(".more-destination").toggle();
         $(this).toggle();
   });
});

最小高さ (デフォルト) と最大高さ (開いた後) の高さを自動にしたいので、この効果が必要なコンテナに jquery コードを使用できます。

出来ますか？

CSS のみで min-height を設定したいのですが、高さについては、div 内のアイテムの数に応じて高さを設定する必要があります。

javascript で高さや幅を指定したくありません。CSSのみ

4

1 に答える 1

1

それは可能です、ほんの少しのハッカー。要素のクローンを作成し、その高さを確認してから、その高さまでアニメーション化できます。要素を最小化するために逆にします。

$(".more-destination").click(function(e) {
    e.preventDefault();
    var clone = $(this).parent().prev("ul").clone().appendTo('body').height('auto');
    var height = clone.height();
    clone.remove();

    $(this).parent().prev("ul").animate({
        height: height
    }, 800, function() {});

    $(this).next(".less-destination").toggle();
    $(this).toggle();
});

$(".less-destination").click(function(e) {
    e.preventDefault();
    var clone = $(this).parent().prev("ul").clone().appendTo('body').height('');
    var height = clone.height();
    clone.remove();

    $(this).parent().prev("ul").animate({
        height: height
    }, 800, function() {});

    $(this).prev(".more-destination").toggle();
    $(this).toggle();
});

jsFiddle： http: //jsfiddle.net/P6vKf/8/

于 2012-04-10T13:18:47.130 に答える