2012-12-11 83 views
0

基本上我們有一個分爲3個級別的商店類別導航。我們需要做到這一點,以使UL的高度至少達到其孩子的身高。根據父母身高設置UL最小高度

所以說,例如#nav UL爲600px的,#nav UL UL將自動成爲至少600px的本身。然而,如果#nav ul ul ul是750px,那麼它將需要能夠高,而不是被限制在600px。

我們可以得到它,所以如果父母是600px所有孩子都設置爲600px的高度,但是您如何以最小高度來做到這一點?

參見鏈接,例如:

正如可以看到第二電平調整到母體的高度但隨後的第三級被限制在該長度爲JS設定高度,而不是最小高度

謝謝, 邁克

+2

,則應該設置的jsfiddle讓我們看看發生了什麼 –

+0

http://jsfiddle.net/bzsM9/16/ – MikeyOh

+0

嘿,如果他們三個相等?或父母ul保持不變,但** ul ul **和** ul ul ul **都變得相同? –

回答

0

只需使用.css('min-height', someHeight)代替.height(someHeight)

+0

是的最小高度是有幫助的(這是顯而易見的一點,我失蹤) - 現在的問題是,每個ul適應最小高度以最高者爲準。它需要做的是:1級可以是任何高度。等級2總是至少是等級1的高度。等級3只需要至少是其父母的高度(在等級2)。非常困惑,我知道! – MikeyOh

0

我不明白你想要什麼,但我能做些什麼我可以做;)

$(document).ready(function() { 
var i1 = 600; 
var i2 = $("#nav ul ul").height(); 
var i3 = $("#nav ul ul ul").height(); 
if(i2 >= i1) { 
$("#nav ul ul").css({ 'min-height':'600px' }); 
} 
if(i3 >= i1) { 
$("#nav ul ul ul").css({ 'min-height':'600px' }); 
} 
}); 

沒有downvoting啊,如果它是錯誤的

+0

耶@roasted說的對!小提琴! –

+0

我有,見他的評論。下面的評論也更詳細 – MikeyOh

0

是不是你在找什麼? DEMO

$(document).ready(function(){ 
    $('ul').hover(function(){ 
     $('ul').setAllToMaxHeight(); 
    }); 
});​ 
0

無法檢索隱藏要素尺寸。結果將是高度和寬度爲零。相反,隱藏它們,你可以設定子UL位置離屏幕使用CSS,如:

ul ul {position: absolute; left: 80px; top: -999em} 
ul li:hover > ul {top:0;} 

由於它們不會隱藏在setAllToMaxHeight()方法效果

DEMO:http://jsfiddle.net/bzsM9/18/

相關問題