Question

我有两个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>

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/

Answer 2

将此添加到您的代码中

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

$('.click').on('click', function () {
    $('.hide').toggle();
    var x = $('.mainDiv').css('height');      // Added
    $('.sideDiv').css('height', x);           // Added
});

FIDDLE

Answer 3

我采用了这种方法，当切换完成时会调整大小。

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

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

});

http://jsfiddle.net/M35xJ/7/

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

3 个答案: