javascript - 如何使最大高度的转换同步工作？

Question

我有 4 个 dropdown 容器。当我单击标题时，我希望显示其关联的段落，而已出现的其他段落则消失。

当单击标题时，我从所有其他段落中删除 active 类，并将其添加到单击其标题的段落中。它工作正常，但问题是，首先出现当前段落，然后其他段落消失，但我希望它们同步工作，就像一个出现另一个消失时一样，但我不知道该怎么做。

HTML:

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header1</a>
  </div>
  <p class="active">some things here some things here some things here some things here</p>
</div>

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header2</a>
  </div>
  <p>some things here some things here some things here some things here</p>
</div>

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header3</a>
  </div>
  <p>some things here some things here some things here some things here</p>
</div>

<div class="dropDown">
  <div class="header">
    <a href="javascript:void(0)">header4</a>
  </div>
  <p>some things here some things here some things here some things here</p>
</div>

CSS:

.dropDown p{
  background: rgb(245, 245, 245);
  border-right: 40px solid #e8e8e8;
  font-size: 13px;
  line-height: 35px;
  max-height: 0px;
  overflow: hidden;
  margin-bottom: 0;
  padding: 0px 15px 0px 30px;
  transition: max-height .3s ease;
}

.dropDown p.active{
  max-height: 500px;
  padding-top:8px;
  padding-bottom: 20px;
}

jQuery:

Headers.click(function(){
  var theP = $(this).parent().children("p"); //current paragraph
  dropDownParagrsphs.not(theP).removeClass("active");
  theP.toggleClass("active");
});

如何进行过渡以协同工作，例如当一个段落的高度减小时，其他段落的高度增加？

Answer 1

有趣的是，您在纯 CSS 中偶然发现了一个看似困难的问题。事实是，您的段落已经按照您想要的方式运行，问题是您已经指定了相对于 p 实际内容的较大最大高度，这给人的印象是它们是一个接一个地执行，但这只是因为将 max-height 增长/收缩到 500px 所需的时间相对较长(与溢出:隐藏的 p 的实际高度相比)。就好像你有一个增长到 500 像素的隐形盒子。通过将 max-height 更改为 auto 应该可以轻松解决这个问题，但不幸的是，您无法在纯 CSS 过渡中为 height auto 设置动画。您的选择是:

a) 选择更接近实际内容大小的不同硬编码最大高度。
b) 使用变换比例(Y)
c) 使用纯JS:例如slideUp和slideDown

var Headers = $('.header') 
var dropDownParagraphs = $('.dropDown p') 

Headers.click(function(){
  var theP = $(this).parent().children("p"); //current paragraph
    // theP.addClass("active");
  // dropDownParagraphs.not(theP).removeClass("active");
  dropDownParagraphs.not(theP).slideUp(200);
  theP.slideDown(200);

});

检查此代码笔以了解 c) 的实现 https://codepen.io/bakuthe3rd/pen/abvzVJz