Question

所以我有一个JQuery函数，它可以使列高度相同。它会检查屏幕大小，如果它在中型设备或更大的设备上，它会将列调整到相同的高度。这部分功能很棒。但是，如果将其调整为移动尺寸（或1025px以下的任何尺寸），则高度不会重置为原始尺寸并保持增大的尺寸。如果它在小屏幕上启动，它将正确显示，直到它被调整为大屏幕然后再次调整为小屏幕（然后出现与上面相同的问题）。

这是代码！

    $(document).ready(function(){
        matchColHeight('.intro-pic', '.intro-desc-container');

        $(window).resize(function(){
            matchColHeight('.intro-pic', '.intro-desc-container');
        });
    }); 

    function matchColHeight(tallColumn, shortColumn){
        shortOriginalHeight = $(shortColumn).height();

        if (window.matchMedia('(min-width: 1025px)').matches) { 
            height = $(tallColumn).height();
            $(shortColumn).css({
                'height': height + 'px'
            });
        }
        else{
            $(shortColumn).css({
                'height': shortOriginalHeight + 'px'
            });
        }
    }

注意：我也尝试使用以下功能，它也有同样的问题：

    function matchColHeight(tallColumn, shortColumn){
        shortOriginalHeight = $(shortColumn).height();
        screenSize = $(window).width();

        if (screenSize > 1025){     
            height = $(tallColumn).height();
            $(shortColumn).css({
                'height': height + 'px'
            });
        }
        else{
            $(shortColumn).css({
                'height': shortOriginalHeight + 'px'
            });
        }
    }

提前致谢！

Answer 1

通过将功能更改为以下内容来解决我的问题：

function matchColHeight(tallColumn, shortColumn){
    if (window.matchMedia('(min-width: 40em)').matches) {   
    height = $(tallColumn).height();
    $(shortColumn).css({
        'height': height + 'px'
        });
    }
    else{
        $(shortColumn).removeAttr('style');
    }
}

我没有存储原始高度并恢复原状高度，而是在不需要时删除了修改后的高度。

JQuery没有调整窗口大小调整div

1 个答案: