javascript - 匹配最高选项卡的高度 - 设置幻灯片高度

Question

我在 accordian/slide 选项卡中使用 jquery idtabs 的变体。

幻灯片高度由 #tab1 内容的内容设置，但这通常不是最高的选项卡 - 因此其他选项卡中的内容可能不完全可见。

幻灯片代码如下:

                <script>
            $(function(){
                var slideHeight = 305; // px
                var defHeight = $('#wrap').height();
                if(defHeight >= slideHeight){
                    $('#wrap').css('height' , slideHeight + 'px');
                    $('#read-more').append('<a href="#">SHOW MORE</a>');
                    $('#read-more a').click(function(){
                        var curHeight = $('#wrap').height();
                        if(curHeight == slideHeight){
                            $('#wrap').animate({
                              height: defHeight
                            }, "normal");
                            $('#read-more a').html('SHOW LESS');
                            $('#gradient').fadeOut();
                        }else{
                            $('#wrap').animate({
                              height: slideHeight
                            }, "normal");
                            $('#read-more a').html('SHOW MORE');
                            $('#gradient').fadeIn();
                        }
                        return false;
                    });
                }
            });

            </script>

我确信在原始代码中使用以下变体应该可以解决问题，但我似乎可以成功合并脚本。

                <script>

                $(function(){

                var heighest = 0;
                $('#wrap').each(function(){
                    heighest = ($(this).height() > heighest) ? $(this).height() : heighest;

                });

                $('#wrap').css('height',heighest + 'px');

            });

            </script>

任何帮助/建议将不胜感激 - 这不是我的领域，我是一名图片专家。

谢谢。

Answer 1

我想您正在寻找这样的东西。请注意，没有元素 #wrap，即使有，$('#wrap').each(...) 也只会作用于其中一个元素。另外，考虑哪些元素必须显示在可见区域内

<script>
    $(function() {
        var slideHeight = 50, // px
            wrapHeight = $('#wrap3').height();

        $('#wrap3 .usual2 div').each(function(){
            wrapHeight = ($(this).outerHeight() > wrapHeight) ? $(this).outerHeight() : wrapHeight;
        });
        defHeight = wrapHeight + slideHeight;

        if(defHeight >= slideHeight) {
            (...etc)