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。我想要使用相同的幻灯片效果扩展第二个区域，并且保持第一个区域的相同高度。我实现它的唯一方法是在第一个区域之后滑动第二个区域，而不是沿着它。

提前致谢。

（编辑）更具体地说，我希望第二个区域与第一个区域的高度相同。所以，如果折叠时第一个区域的高度是100px，那么第二个区域的高度也是100px。如果我将第一个区域扩展到500px，则第二个区域必须具有相同的500px。

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

PS：我只限于jQuery和CSS。

Answer 1

我不确定我理解你的问题

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

呢？

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

in

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

Answer 2

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

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

/* 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});

请查看以下代码段以获取更多信息。

<强>段：

＆＃13;

/* ----- 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});
  }
});

＆＃13;

/* ----- 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}

＆＃13;

<!----- 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>

＆＃13;

根据第一个内容扩展侧面区域

2 个答案: