Javascript 基于另一个Div内容增加一个Div高度，它将'；s高度

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

我想要的内容：当我按单击展开文本时，.mainDiv高度增加，.sideDiv高度应增加到等于.mainDiv高度。当再次时，主DIV减小。侧DIV也减小

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>

JavaScript

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

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

是的，请试试这个

演示：

更多详细信息：

是的，请尝试此功能

演示：

更多详细信息：

将此添加到您的代码中

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

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

将此添加到您的代码中

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

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

---

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

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

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

});

---

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

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

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

});

---

你能再给我提一点建议吗？比如如果我有很多.mainDiv和.sideDiv，点击每个.mainDiv会增加它的.sideDiv高度？这可能吗？是的，这是可能的。当前您正在使用类作为选择器。所以，如果有更多的div具有相同的类，那么它将选择all并执行相同的操作。取而代之的是，你可以为每个div设置ID，并用一种通用的方法来识别子div，这样我就必须设置与我使用的div相同数量的ID。但我想知道我是否要拿100张身份证？还有更具活力的方式吗？那么Div的号码到底是多少？感谢您给予我宝贵的时间。您可以选择使用

jquery parent

。不同的div需要不同的id。如果手动创建html，则必须提供不同的id。如果使用某些程序生成html，则可以轻松生成id。您需要使用jquery父项识别包含“单击此处”的div的id，并找到下一个id（生成与mainDiv相关的第二个div ID，如

smalldiv\u mainDiv1

etc）。因此，您可以确定是否获得了main div的id。只需选中此项，它将为您提供jquery父级的概念。您可以就这一点向我提供更多建议吗？例如，如果我有许多.mainDiv和.sideDiv，并单击每个.mainDiv将增加其.sideDiv的高度？示例：这可能吗？是的，这是可能的。当前您正在使用类作为选择或者。如果你有更多的div具有相同的类，那么它将选择all并执行相同的操作。相反，你可以为每个div设置ID，并制定一种通用的方法来识别子div，因此我必须将ID的数量与我获取的div的数量相同。但是我想知道，如果是100个div，我是否必须获取100个ID？是否还有其他更动态的方法o该Div的编号是否有效？感谢您给予我宝贵的时间。您可以选择使用

jquery parent

。不同的Div需要不同的id。如果您手动创建html，则必须提供不同的id。如果您使用某些程序生成html，则可以轻松生成id。您需要使用jquery父项识别包含“单击此处”的div的id，并找到下一个id（生成与mainDiv相关的第二个div id，如

smalldiv\u mainDiv1

等）。这样您就可以识别是否获得了main div的id。只需选中此项，就可以了解jquery父项。