根据孩子的身高设置父母的身高

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以获得最高的.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>