jQuery保持子集高度一致簡易方法

需求

來自於移動端web需要一個樹狀圖,但分支有些内容多,有些内容少,就會呈現“缺失”的狀態,如下:

jQuery保持子集高度一致簡易方法_第1张图片
第一個方塊底下有空隙”

原因

其原因是因爲各層連接綫是由方塊的偽類+div的border實現的,所以如果樹狀圖中各個方塊的高度不一,就會出現中間的“缺失”。并且如果樹狀圖的每個方塊高度一致,整個圖也會顯得較爲美觀。
但是方塊的高度不能寫死,如果後期需要修改方塊裏的内容或是增加内容,寫死將會給修改帶來麻煩。由於CSS無法自動計算方塊的高度,所以用jQuery來計算。

思路

高度保持一致,指的是每層方塊的高度一致,無需整個樹狀圖高度一致。
1、首先,讀出所需層的每個方塊的高度值(現高度是由方塊内容撐開的);
2、其次,將第一個方塊的高度值作爲這層中所有方塊中的最高高度max;
3、再者,將每個方塊的高度值代入,判斷代入的高度值是否大於max;
4、如果大於max,將此高度值取代原來max的值,如果小於,則不計;
5、最後,將max作爲所需層所有方塊的高度值。

代碼

    
jQuery保持子集高度一致簡易方法_第2张图片
現在方塊高度保持一致了

入門學習所用,僅限于個人練習。

你可能感兴趣的:(jQuery保持子集高度一致簡易方法)