2011-07-17 62 views
6

讓我開始說,由於佈局的複雜設計,我最終編寫了一個名爲equalHeights的函數,它基本上查看了我的佈局中的幾個div,並選擇最高並設置休息的高度,以便我可以結束與高度相等的div。所以基本上在頁面加載後,如果你看看代碼,你會看到style =「height:xxx」應用於每個div。這我不能改變,所以任何解決方案都不能觸及此功能。如何檢測和更改jQuery的div高度

該divs也有溢出設置爲隱藏,這又有其目的,不能改變。

因此,考慮到上述情況,我需要做的是能夠根據用戶交互的變化來改變div的高度。例如,我有一個隱藏行的表,當用戶點擊一個鏈接時,這些行會被展開。表格的額外長度將因爲溢出而被隱藏,我需要擴展div的大小。同時,我不想將此擴展綁定到該特定點擊,我希望使用Javascript檢測內容中的更改並相應地擴展我的div。我不希望它綁定的原因是因爲我需要在具有相同佈局的不同頁面中實現此操作,並且我不想爲每個事件編寫代碼。

我曾經嘗試都:

$("#myDiv").resize(function(){ 
    equalHeight($("#myDiv")); 
}); 

$("#myDiv").content().resize(function(){ 
    equalHeight($("#myDiv")); 
}); 

既不似乎工作!有任何想法嗎?

回答

8

基本的調整大小事件只能綁定到$(窗口),你需要的,如果你想成爲能夠resize事件綁定到一個div使用插件:

http://benalman.com/projects/jquery-resize-plugin/

+0

或者其一次性的東西,你可以編寫自己的插件,手錶在計時元素與一些小間隔的高度,當它發現一個變化觸發回調函數。 – Nitin

0

假設您有一組顯示的行數,您可以檢查一個大於此數的數字,然後相應地設置div的樣式。

1

你可以在功能上觸發你自己的div事件。所以,它不會強制你重寫點擊函數。

http://jsfiddle.net/JKByC/7/

+0

應該在答案中包含代碼。但這是一個好主意。觸發你知道導致div大小調整的函數中的事件,然後捕獲該事件。 – Andrew

0
 var last_height = $('#div').css('height'); 

     $(window).resize(function() { 
      if($('#div').css('height') != last_height) 
      { 
       last_height = $('#div').css('height'); 
       //do what you want 
      } 
     }); 
+0

爲帖子添加說明。爲什麼你的文章是針對特定問題的答案?只有代碼答案不夠。請參閱[我如何寫出一個好的答案?](http://stackoverflow.com/help/how-to-answer) – Shashanth