javascript - 根据div的内部文本计算高度

Question

我有一个 PHP 循环来创建多个显示数据库数据的 div。

<?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，根本无法扩展。文本过多的 div 应扩展到计算高度。

我已经设置了一个 jsfiddle 程序来演示我的意思:https://jsfiddle.net/vz6s9brd/

Answer 1

现在它只是动画到 200 像素并返回。我认为您正在寻找这样的东西:

$('.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);
});