1

当前的 js 小提琴示例

我有两个 Div .mainDiv和.sideDiv。 .mainDiv有很长的内容，其中包含切换段落。当我单击 单击以展开文本时，会显示完整的段落并且此内容的高度会增加。

我想要什么：当我按下Click to expand text 时， .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();
});
4

3 回答 3

5

是的，请试试这个。

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

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

更多细节：http ://api.jquery.com/height/

于 2013-08-16T13:43:45.353 回答
2

将此添加到您的代码中

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

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

小提琴

于 2013-08-16T13:46:18.737 回答
2

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

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

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

});

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

于 2013-08-16T13:48:27.153 回答