1

現在の js フィドルの例

私は 2 つの Div .mainDivと.sideDivを持っています。 .mainDivには、トグル段落を含む長いコンテンツがあります。Click to expandテキストをクリック すると、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();
});
4

3 に答える 3

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 に答える
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 に答える