2012-12-11 82 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/

相关问题