根據孩子的身高設置父母身高

Question

我有一個帶有幾張幻燈片的滑塊;每張幻燈片都有不同的高度。

它的工作原理是這樣的：

1滑

<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

你可以遍歷它們來獲得最高的​​的高度。

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>