javascript - 在第一个内容的基础上扩展side area

Question

我正在尝试使用 jQuery 根据另一个区域的高度扩展一个区域。但是，第一个区域是动态内容，所以我不能像在 JS 代码中那样设置固定值(第 6 行，高度为 175px)。

我这里有一个例子: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>

JS:

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。我希望第二个区域也展开，使用相同的滑动效果，并保持与第一个区域相同的高度。我实现它的唯一方法是在第一个区域之后滑动第二个区域，而不是沿着。

提前致谢。

(edit) 更具体地说，我希望第二个区域与第一个区域的高度相同。所以，如果第一个区域在折叠时高度为 100px，则第二个区域也将具有 100px 高度。如果我将第一个区域扩展到 500px，则第二个区域必须具有相同的 500px。

我不想给第二个区域设置一个固定的高度，就像我在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>