匹配最高标签的高度 - 设置幻灯片高度

时间:2013-11-14 14:45:16

标签: javascript jquery html css

我在手风琴/幻灯片标签中使用了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>

任何帮助/建议将不胜感激 - 这不是我的领域,我是一个图片人。

感谢。

1 个答案:

答案 0 :(得分:0)

我认为你正在寻找这样的东西。请注意,没有元素#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)