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

现在它只是动画到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

您可以改为设置溢出设置，而不是计算高度。您想要在两种模式之间切换 - 一种模式具有有限的高度且没有溢出，另一种模式的高度由内容决定。

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

不幸的是，这样做并没有很好的动画效果。即使您通过调用css()替换上面的animate()来电，结果也不尽如人意。动画对你来说有多重要取决于你。

根据div的内部文本

2 个答案: