divの内部テキストに従って高さを計算する

Question

データベースのデータを表示する複数のdivを作成するPHPループがあります。

<?php 

    foreach($result as $row) { 
     ?> 
     <div class="container-fluid" id="content-fluid"> 
      <div class="container-update"> 
       <div class="update-group"> 
        <div class="update-header"> 
         <?php echo $row['update_title'] ?> 
         <div class="update-author"> 
          by <?php echo $row['update_creator'] ?> 
         </div> 
        </div> 
        <div class="update-body"> 
         <?php echo $row['update_text']; ?> 
        </div> 
       </div> 
      </div> 
     </div> 
     <?php 
    } 
?> 

私はjQueryを介してそれらがクリッカブル作られ、彼らは高さに増加します：

 $(document).ready(function() { 

      $('.update-group').click(function() { 

       var clicks = $(this).data('clicks'); 
       if(clicks) { 
        $(this).removeAttr('style'); 
       } 
       else { 
        $(this).animate({height: '200px'}, 300); 
       } 
       $(this).data("clicks", !clicks); 
      }); 
     }); 

デフォルトの高さは、すべてのdivは、同じ高さであることを保証するために特定の値に設定され、オーバーフローがに設定されています隠されたそれらをクリックすると、その内部のテキストに従って下に展開されます。

テキストがちょうど良いディビットは、まったく拡張できないはずです。また、余分な量のテキストを含むdivは、計算された高さに拡大されます。

私は私が何を意味するかを実証するjsfiddleプログラムを設定しました：https://jsfiddle.net/vz6s9brd/

Answer 1

は今のところそれだけで200pxのバックにアニメーション化します。

$('.update-group').click(function() { 

    var clicks = $(this).data('clicks'); 
    if(clicks) { 
    $(this).removeAttr('style'); 
    } 
    else { 
    var bod = $(this).find('.update-body'); 
    var head = $(this).find('.update-header'); 
    var neededHeight = bod.height() + head.height(); 
    if ($(this).height() < neededHeight) { 
     $(this).animate({height: neededHeight + 'px'}, 300); 
    } 

    } 
    $(this).data("clicks", !clicks); 
}); 

Answer 2

高さを計算するのではなく、オーバーフロー設定を変更することができます。制限された高さとオーバーフローのないモードと、内容によって決まる高さを持つモードの2つのモードを切り替える必要があります。

if(clicks) { 
    $(this).css({overflow: 'hidden', height: '6em'}); 
    } 
    else { 
    $(this).css({overflow: 'inherit', height: '100%'}); 
    } 

残念ながら、このようにすると非常にうまくアニメーション化されません。上記のcss()のコールをanimate()のコールに置き換えても、結果は不満です。アニメーションの重要性はあなた次第です。