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

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实际内容的最大最大高度，给人的印象是它们在执行完之后另一个，但这仅仅是因为所需的时间相对较长（与p的实际高度（带溢出：隐藏）相比）很长，才能将最大高度增加/缩小到500px。好像您有一个不可见的框长到500px。通过将max-height更改为auto可以轻松解决此[[should，但是不幸的是，您不能在纯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);

});

检查此codepen以实现c）https://codepen.io/bakuthe3rd/pen/abvzVJz

Answer 2

您可以使用.slideToogle(duration, easing, callback)方法进行操作。另外，我将.slideToogle(duration, easing, callback)和padding-bottom属性从padding-top移到了p，以便在过渡期间它们不会发生太大变化。

jQuery：

p.active

 
$('p').slideUp(0); // close all
$('.active').slideToggle(300); // open the default

$('.header').click(function() {
  var nowP = $(this).parent().children("p"); // current paragraph
  var prevP = $('.active'); // opened paragraph
  var isSame = $('p').index(prevP) == $('p').index(nowP);

  prevP.removeClass("active").slideToggle({ duration: 300, queue: false });
  if (!isSame) nowP.addClass("active").slideToggle({ duration: 300, queue: false });
});
$('p').slideUp(0);
$('.active').slideToggle(300);

$('.header').click(function() {
  var nowP = $(this).parent().children("p"); // current paragraph
  var prevP = $('.active'); // opened paragraph
  var isSame = $('p').index(prevP) == $('p').index(nowP);

  prevP.removeClass("active").slideToggle({ duration: 300, queue: false });
  if (!isSame) nowP.addClass("active").slideToggle({ duration: 300, queue: false });
});
.dropDown p {
  background: rgb(245, 245, 245);
  border-right: 40px solid #e8e8e8;
  font-size: 13px;
  line-height: 35px;
  overflow: hidden;
  margin-bottom: 0;
  padding: 0px 15px 0px 30px;
  transition: max-height .3s ease;
  padding-top: 8px;
  padding-bottom: 20px;
}

.dropDown p.active {
  max-height: 500px;
}
[此外，您会发现单击同一链接时，下拉列表将被关闭。我已经添加了它，因为我希望这可能是所需的效果：）
此外，如果需要线性转换，可以在<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>方法中将'linear'添加为第二个参数。默认情况下，它是.slideToggle。