Question

我有一个带有几张幻灯片的滑块;每张幻灯片都有不同的高度。

它的工作原理如下：

第一张幻灯片

<holder>
 <slide - display: block>
 <slide - display: none>
 <slide - display: none>
</holder>

第二张幻灯片

<holder>
 <slide - display: none>
 <slide - display: block>
 <slide - display: none>
</holder>

等

幻灯片有position: absolute（必须这样）。

问题是：如何动态更改holder的高度以查看每张幻灯片的整个内容？

现在我有：

<script type="text/javascript">
  $(document).ready(function(){
    $(".holder").height( $(".slide").height() );
  });
</script>

<script type="text/javascript">
  $(window).resize(function() {
    $(".holder").height( $(".slide").height() );
  });
</script>

但它只使用第一张幻灯片的高度，因此其他幻灯片被剪掉了。

请使用javascript来帮助解决此问题。

Answer 1

你可以遍历它们以获得最高.slide的高度。

function updateSlideHolderSize() {
    var max = 0;
    $(".slide").each(function () {
        max = Math.max(max, $(this).height());
    });
    $(".holder").height(max);
}

所以它会像你一样进入你的应用程序：

<script type="text/javascript">
$(document).ready(updateSlideHolderSize);
$(window).resize(updateSlideHolderSize);

function updateSlideHolderSize() {
    var max = 0;
    $(".slide").each(function () {
        max = Math.max(max, $(this).height());
    });
    $(".holder").height(max);
}
</script>

根据孩子的身高设置父高

1 个答案: