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

謝謝！

來源

2016-02-26 Nick Norrell

爲什麼不使用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'); 
    } 
}

不是存儲原來的高度，並恢復到它的，我只是刪除修改後的高度不需要的時候。

來源

2016-02-28 22:29:27

JQuery不調整div窗口調整大小

回答

相關問題