根据另一个Div内容增加Div高度，它's的高度

Increase a Div height based on another Div content and it's height

本文关键字：Div 高度 增加 另一个      更新时间：2023-09-26

当前js小提琴示例

我有两个分区.mainDiv和.sideDiv。当我单击单击以展开文本时，会显示FULL段落，并且此内容的高度会增加。

我想要什么：当我按下单击以展开文本时，.mainDiv高度会增加，并且.sideDiv高度也会增加到等于.main.Div高度。当再次主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();
});

是的，请尝试一下。

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

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

更多详细信息：http://api.jquery.com/height/

将其添加到您的代码中

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

FIDDLE

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

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

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

相关文章：