JQuery不调整div窗口调整大小

问题描述：

因此，我有一个JQuery函数是为了使列高度相同而构建的。它会检查屏幕尺寸，如果它位于中型设备或更大尺寸的设备上，则会将列调整到相同高度。这部分功能很好。但是，如果将其大小调整为移动大小（或1025像素以下的任何内容），则高度不会重置为原始大小并保持增大的大小。如果它从一个小屏幕开始，它会正确显示，直到它被调整到一个大屏幕，然后再次调整到一个小屏幕（然后发生与上面相同的问题）。JQuery不调整div窗口调整大小

这是代码！

$(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' 
      }); 
     } 
    }

谢谢！

为什么不使用CSS中的mediaquery而不是这个 –

@Çağrı我正在使用Zurb Foundation框架。令人遗憾的是，根据JavaScript的内容，唯一的方式（据我所知）将列设置为基于其内容的相同高度。 –

我看，$（window）.width（）;这工作与否？如果不工作，可能在元标记设备宽度丢失。 –

答

最终被改变功能以下解决我的问题：

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窗口调整大小

相关推荐