javascript - 根据另一个 Div 内容及其高度增加一个 Div 高度

Question

Current js fiddle Example

我有两个 Div .mainDiv 和 .sideDiv。 .mainDiv 有很长的内容，里面有切换段落。当我点击Click to expand 文本时，会显示完整段落并且该内容的高度会增加。

我想要什么:当我按下Click to expand 文本时，.mainDiv 高度增加并且.sideDiv 高度应该增加等于.mainDiv 高度。当 Again 主 DIV 降低时，.sideDiv 的高度也会降低。

jQuery 有什么方法可以做到这一点吗？我不擅长 jquery 所以我发现很难实现它，如果有人帮助我对我来说会很好。也很抱歉英语不好

谢谢

HTML

<div class="mainDiv">
<p class="click"> Click to expand </p>

<p class="hide">
    and scrambled it to make a type specimen book. It has survived not only five centuries, 
    but also the leap into electronic typesetting, remaining essentially unchanged. 
    It was popularised in the 1960s with the release of Letraset
    sheets containing Lorem Ipsum passages, and more recently with
    desktop publishing software like Aldus PageMaker 
    including versions of Lorem Ipsum.

</p>    

</div>

<div class="sideDiv">
  <p>Should Expand this Div</p>
</div>

CSS

.mainDiv {
background-color:#ccc;
float:left;
width:200px;
}

.sideDiv {
background:yellow;
float:left;
width:200px;
height:auto;
}

JavaScript

$('.hide').hide();

$('.click').on('click', function () {
$('.hide').toggle();
});

Answer 1

是的，请试试这个。

演示:http://jsfiddle.net/M35xJ/5/

$('.click').on('click', function () {
    $('.hide').toggle();        
    $('.sideDiv').height($('.mainDiv').height());
});

更多详情:http://api.jquery.com/height/