如何设置两个div具有相同的高度在JQuery中

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

我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' 
}); 
});

来源

2014-07-13 Jim

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

小提琴：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 
    }); 
});

来源

2014-07-13 05:21:45

首先你需要得到第一个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

来源

2014-07-13 05:29:25

如何设置两个div具有相同的高度在JQuery中

回答

相关问题