2014-07-13 57 views
1

我试图让我的第二个div改变它的高度动态时不改变css的第二个div高度只是jquery我的第一个div变化:如何设置两个div具有相同的高度在JQuery中

这是我的小提琴: http://jsfiddle.net/692QF/

html代码:

<div id='box'> 
    <p>This is some text</p> 
</div> 
<div id='in'></div> 

css代码:

#box{ 
background:#0066FF; 
border:1px solid blue; 
width:250px; 
position:absolute; 
top:10px; 
left:10px; 
padding:10px; 
} 
#in{ 
display:none; 
background:#000; 
position:absolute; 
z-index:-1; 
} 
p{ 
color:white; 
} 

MY jquery代码:

$('#box').hover(function(){ 
$('#in').toggle(); 
$('#in').css({ 
    'width' : '250px', 
    'height' : '60px', 
    'border' : '1px solid blue', 
    'padding' : '10px' 
}); 
}); 

回答

0

我创造了这个捣鼓你希望这你真正想要的是我不明白你的问题非常好

小提琴:http://jsfiddle.net/692QF/1/

var height = $('#box').height(); 
var width = $('#box').width(); 
var border = $('#box').css('border'); 
var padding = $('#box').css('padding'); 

$('#box').hover(function(){ 
    $('#in').toggle(); 
    $('#in').css({ 
     'width' : width, 
     'height' : height, 
     'border' : border, 
     'padding' : padding 
    }); 
}); 
0

首先你需要得到第一个div的高度然后分配给第二个div 所以您的jQuery

$('#box').hover(function(){ 
    var hDiv1=$(this).height(); 
    $('#in').toggle(); 
    $('#in').height(hDiv1).css({ 
     'width' : '250px', 
     'border' : '1px solid blue', 
     'padding' : '10px' 
    }); 

}); 

DEMO

相关问题