根据第一个区域的内容扩展边区域

Question

我试着用jQuery根据另一个区域的高度来扩展一个区域。但是，第一个区域具有动态内容，因此不能像在JS代码中那样设置固定值(第6行，高度为175 of )。

这里有一个例子：https://codepen.io/anon/pen/VyEZjv。

HTML

<div>
    <div class="columns row-8">
        <section id="summary" class="area">
            <main>
                <div id="details">
                    <div>bla bla</div>
                    <div>bla bla</div>
                    <div>bla bla</div>
                </div>
                <div id="more-details" class="hide">
                    <div>more bla bla</div>
                    <div>more bla bla</div>
                    <div>more bla bla</div>
                </div>
            </main>
            <footer>
                <button id="more-details-link">View more details</button>
            </footer>
        </section>
    </div>
    <div class="columns row-4">
        <section id="activity" class="area">
            <main>
                <ul>
                    <li>activity</li>
                    <li>activity</li>
                    <li>activity</li>
                    <li>activity</li>
                    <li>activity</li>
                    <li>activity</li>
                    <li>activity</li>
                    <li>activity</li>
                    <li>activity</li>
                    <li>activity</li>
                </ul>
            </main>
            <footer>
                <a id="full-activity" href="#">See full activity</a>
            </footer>
        </section>
    </div>
</div>

联署材料：

var minHeight = $('#summary > main').height();
$('#activity > main').height(minHeight);

$('#more-details-link').on('click', function(){
    if ($('#more-details').is(':hidden')) {
        $('#more-details').slideDown();
        // I don't want to set a fixed value, because the first area content may vary
        $('#activity > main').animate({height: '115px'});
    } else {
        $('#more-details').slideUp();
        $('#activity > main').animate({height: minHeight});
    }
});

因此，第一个区域有两个div:一个总是显示的，另一个默认是隐藏的。当我单击展开按钮时，该区域将向下滑动以显示隐藏的div。我希望第二个区域也能扩展，使用相同的幻灯片效果，保持第一个区域的相同高度。我唯一能达到的方法是在第一个区域之后滑动第二个区域，而不是沿着第一个区域。

提前谢谢。

(编辑)更具体地说，我希望第二个区域与第一个区域的高度相同。所以，如果第一个区域的高度是100 if，而第二个区域的高度也是100 if。如果我把第一个区域扩展到500 to，第二个区域必须有相同的500 to。

我不想设置第二个区域的固定高度，就像我在js代码中所做的那样。我需要得到第一个区域的高度，并将相同的值设置为第二个。我无法在slideDown()之后得到第一个函数的高度，因为它是一个异步函数，我会得到错误的高度。

PS:我只限于jQuery和CSS。

Answer 1

为了能够同时展开两个部分，您需要知道展开时最大部分所占的高度。

为了实现这一点，我在下面可能使用了最丑陋的技巧：

/* Show and hide '#more-details' instantly to find out the height it reaches. */
var maxHeight;
$('#more-details').show();
maxHeight = $('#summary > main').height();
$('#more-details').hide();

完成此操作后，现在只需在事件侦听器中使用'115px'替换maxHeight即可。

$('#more-details').slideDown();
$('#activity> main').animate({height: maxHeight});

有关更多信息，请查看下面的片段。

片段：

​

/* ----- JavaScript ----- */

var
  /* Cache summary, activity and more-details. */
  summary = $('#summary > main'),
  activity = $('#activity > main'),
  moreDetails = $('#more-details'),
  
  /* Cache the height of the summary. */
  minHeight = summary.height(),
  maxHeight;

/* Set the activity to match the summary's height. */
activity.height(minHeight);

/* Show and hide '#more-details' instantly to find out the height it reaches. */
moreDetails.show();
maxHeight = summary.height();
moreDetails.hide();

/* Set the 'click' event of the link. */
$('#more-details-link').on('click', function(){
  if (moreDetails.is(':hidden')) {
    moreDetails.slideDown();
    activity.animate({height: maxHeight});
  } else {
    moreDetails.slideUp();
    activity.animate({height: minHeight});
  }
});

/* ----- CSS ----- */
main {padding: 7px}
footer {border-top: 1px solid #000}
.columns {float: left;margin: 10px}
.row-8 {width: 200px}
.row-4 {width: 200px}
.area {background-color: #AAA}
.hide {display: none}
#activity>main {overflow: hidden}

<!----- HTML ----->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<div>
  <div class="columns row-8">
    <section id="summary" class="area">
      <main>
        <div id="details">
          <div>bla bla</div>
          <div>bla bla</div>
          <div>bla bla</div>
        </div>
        <div id="more-details" class="hide">
          <div>more bla bla</div>
          <div>more bla bla</div>
          <div>more bla bla</div>
        </div>
      </main>
      <footer>
        <button id="more-details-link">View more details</button>
      </footer>
    </section>
  </div>
  <div class="columns row-4">
    <section id="activity" class="area">
      <main>
        <ul>
          <li>activity</li>
          <li>activity</li>
          <li>activity</li>
          <li>activity</li>
          <li>activity</li>
          <li>activity</li>
          <li>activity</li>
          <li>activity</li>
          <li>activity</li>
          <li>activity</li>
        </ul>
      </main>
      <footer>
        <a id="full-activity" href="#">See full activity</a>
      </footer>
    </section>
  </div>
</div>

​

Answer 2

我不太明白你的问题

如果您想同时展开这两个部分，那么多个选择器如何？

$('#full-activity, #activity > main')

在……里面

$('#more-details-link').on('click', function(){
...
  $('#full-activity, #activity > main').animate({height: '115px'});
...
  $('#full-activity, #activity > main').animate({height: minHeight});