我有两个Div .mainDiv和.sideDiv. .mainDiv有很长的内容,其中包含切换段落.单击" 单击以展开文本"时,将显示FULL段,并且此内容的高度会增加.
我想要什么:当我按下单击以展开文本时,.mainDiv高度增加,并且.sideDiv高度应该增加等于.mainDiv高度.当主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>
Run Code Online (Sandbox Code Playgroud)
CSS
.mainDiv {
background-color:#ccc;
float:left;
width:200px;
}
.sideDiv {
background:yellow;
float:left;
width:200px;
height:auto;
}
Run Code Online (Sandbox Code Playgroud)
JavaScript的
$('.hide').hide();
$('.click').on('click', function () {
$('.hide').toggle();
});
Run Code Online (Sandbox Code Playgroud)
是的,请试试这个.
演示:http://jsfiddle.net/M35xJ/5/
$('.click').on('click', function () {
$('.hide').toggle();
$('.sideDiv').height($('.mainDiv').height());
});
Run Code Online (Sandbox Code Playgroud)
更多细节:http://api.jquery.com/height/